/* Shared by the project pages: tokens, palettes, header, footer, cursor, preview controls. */
:root{
  --bg:#fbfaf8; --ink:#242424; --muted:#62625e; --soft:#8f8e89; --blue:#3838eb; --yellow:#e6d811; --line:#e2e0d8; --ph:#e8e6df;
  --name:#1a1ac4; --tint:rgba(230,216,17,.28); --foot:var(--tint); --cur-dark:#3b3b3e;
}
[data-theme="lux"]{--bg:#fcfbfb;--ink:#192a56;--muted:#4c5878;--blue:#192a56;--yellow:#f7d794;--name:#192a56;--tint:rgba(237,166,163,.30);--foot:rgba(247,215,148,.45);--line:#eee6e0}
[data-theme="lime"]{--bg:#ffffff;--ink:#2a2a4f;--muted:#5b5b7c;--blue:#6363b0;--yellow:#cdd21e;--name:#6363b0;--tint:rgba(205,210,30,.26);--foot:rgba(99,99,176,.14);--line:#e6e6f0}
[data-theme="cobalt"]{--bg:#f8f7f3;--ink:#1b1f2e;--muted:#5a5a56;--blue:#1546d9;--yellow:#f9b318;--name:#1546d9;--tint:rgba(249,179,24,.28);--foot:rgba(249,179,24,.28);--line:#e6e4dc}
[data-theme="burgundy"]{--bg:#fff8ec;--ink:#2b1e2c;--muted:#6b5049;--blue:#3e469e;--yellow:#7d1f28;--name:#3e469e;--tint:rgba(125,31,40,.12);--foot:rgba(62,70,158,.12);--line:#efdcbc}
[data-theme="oxford"]{--bg:#fffaeb;--ink:#14263f;--muted:#4f5a6b;--blue:#123e6b;--yellow:#f2d25b;--name:#123e6b;--tint:rgba(242,210,91,.38);--foot:rgba(236,146,72,.20);--line:#f1e4b8}
[data-theme="cornflower"]{--bg:#faf9f6;--ink:#121318;--muted:#4f5158;--blue:#4a73b0;--yellow:#8faedc;--name:#4a73b0;--tint:rgba(143,174,220,.32);--foot:rgba(143,174,220,.26);--line:#e6e2da}
[data-theme="oxwhite"]{--bg:#ffffff;--ink:#14263f;--muted:#4f5a6b;--blue:#123e6b;--yellow:#ec9248;--name:#123e6b;--tint:rgba(236,146,72,.16);--foot:rgba(18,62,107,.06);--line:#e8e9ec}
[data-theme="periapricot"]{--bg:#ffffff;--ink:#2a2a4f;--muted:#5b5b7c;--blue:#6363b0;--yellow:#ec9248;--name:#6363b0;--tint:rgba(236,146,72,.16);--foot:var(--tint);--line:#e6e6f0}
[data-theme="periapricot-off"]{--bg:#f6f5f1;--ink:#2a2a4f;--muted:#5b5b7c;--blue:#6363b0;--yellow:#ec9248;--name:#6363b0;--tint:rgba(236,146,72,.16);--foot:rgba(99,99,176,.08);--line:#e2e0d8}
[data-theme="trio"]{--bg:#ffffff;--ink:#2a2a4f;--muted:#5b5b7c;--blue:#6363b0;--yellow:#f2d25b;--name:#6363b0;--tint:rgba(242,210,91,.30);--foot:rgba(236,146,72,.14);--line:#e6e6f0}
html[data-bg="white"]{--bg:#ffffff}
html[data-bg="off"]{--bg:#f6f5f1}

*{box-sizing:border-box}
html{scrollbar-color:color-mix(in srgb,var(--blue) 45%,var(--bg)) var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:Manrope,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .4s}
::selection{background:color-mix(in srgb,var(--yellow) 70%,transparent);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.site{position:relative;max-width:1536px;margin:0 auto;overflow:clip} /* clip, not hidden, so the section index can stick */
.site > [data-name]:first-child{background-color:var(--bg);background-size:22px 22px,auto;background-position:0 0} /* same dot grid as home */

/* header */
.head,.foot,.next-link{width:100%;align-self:stretch;flex-shrink:0}
/* the header stays at the top while scrolling; once the page moves it gets a frosted backing and slims down */
.head{position:sticky;top:0;z-index:50;height:94px;display:flex;align-items:center;justify-content:space-between;padding:23px 80px 23px 19px;
  transition:height .3s cubic-bezier(.16,1,.3,1),background-color .3s,box-shadow .3s}
.head.stuck{height:72px;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.brand{position:relative;display:block;width:120px;height:48px}
.brand .logo{position:absolute;left:0;top:0;width:50px;height:48px;overflow:hidden}
.brand .logo img{position:absolute;width:150%;height:157.89%;left:-20%;top:-28.95%;max-width:none}
.brand .name{position:absolute;left:8px;top:20px;font-family:Sacramento,cursive;font-size:36px;line-height:19.8px;letter-spacing:-.18px;color:var(--name);white-space:nowrap}
.head nav{display:flex;gap:8px}
.head nav a{height:40px;padding:0 16px;display:flex;align-items:center;border-radius:100px;font-weight:700;font-size:18px;color:var(--muted);transition:background-color .2s,color .2s}
.head nav a:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.head nav a.on{background:var(--blue);color:#fff}

/* footer */
.foot{display:flex;justify-content:space-between;padding:72px 80px 80px 56px;background:var(--foot);border-top:1px solid var(--line);color:var(--ink)}
.foot > div:first-child{display:flex;flex-direction:column;gap:14px}
.foot > div:first-child p{width:400px;font-size:16px;line-height:1.55;margin:0}
.foot p{margin:0}
.mail{font-weight:700;font-size:26px;letter-spacing:-.26px}
.mail:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.credits{width:400px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;font-size:16px}
.credits b{font-weight:700}
.credits hr{width:100%;border:0;border-top:1px solid #dedcd4;margin:14px 0 0}
.socials{display:flex;gap:12px;padding-top:14px}
.socials a{width:68px;height:68px;border-radius:24px;display:grid;place-items:center;transition:background-color .2s}
.socials a:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.socials .be{font-weight:800;font-size:16px;color:#2f5c9a}

/* project page behaviour */
[data-name="Sections"] > *{scroll-margin-top:96px} /* keep section tops clear of the sticky header */
.sticky-index{position:sticky;top:96px;display:flex;flex-direction:column;gap:36px}
[data-name="Section index"] > [role="link"]{cursor:pointer;transition:opacity .2s}
[data-name="Section index"] > [role="link"]:hover{opacity:.7}
[data-name="Section index"] [data-name="Active marker"]{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.idx-on p{color:var(--blue) !important}
.next-link{display:block;transition:background-color .3s}
.next-link:hover{background:color-mix(in srgb,var(--blue) 4%,transparent)}
.next-link img{transition:transform .6s cubic-bezier(.16,1,.3,1)}

/* custom cursor */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.has-cursor .cursor.live{opacity:1}
.has-cursor, .has-cursor *{cursor:none !important}
.cursor svg{display:block;width:22px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.cursor svg path{fill:var(--c,var(--cur-dark));transition:fill .25s}
.cursor .tag{position:absolute;left:16px;top:22px;padding:6px 12px;border-radius:100px;background:var(--c,var(--cur-dark));color:#fff;
  font-weight:700;font-size:13px;line-height:1;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:background-color .25s;transform-origin:0 0}
.cursor.me{--c:var(--blue)}
.cursor .tag.pop{animation:pop .32s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}}

/* preview-only controls */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cursor .tag.pop{animation:none}
}

/* ===== RESPONSIVE (project pages) ===== */
/* tablet and phone: one column, the section index is hidden, text reflows, and wide visuals are scaled to fit by site.js */
@media (max-width:1023px){
  :root{--gut:clamp(20px,5vw,48px)}
  .head{height:64px;padding:10px var(--gut);gap:8px}
  .head.stuck{height:58px}
  .brand{width:auto;height:40px;flex:none}
  .brand .name{position:static;display:block;font-size:30px;line-height:40px}
  .head nav{gap:2px}
  .head nav a{height:36px;padding:0 10px;font-size:14px}

  [data-name="Hero"],[data-name="Case study"],[data-name="Next project"]{padding-left:var(--gut) !important;padding-right:var(--gut) !important}
  [data-name="Hero"]{padding-top:28px !important;padding-bottom:48px !important;gap:20px !important}
  [data-name="Sidebar"]{display:none !important}
  [data-name="Sections"] [data-name="Section label"],[data-name="Sections"] [data-name="Content"]{padding-left:0 !important;padding-right:0 !important}
  [data-name="Sections"] [data-name="Content"]{gap:28px !important}
  [data-name="Next project"]{flex-direction:column;align-items:flex-start !important;gap:24px !important;padding-top:44px !important;padding-bottom:56px !important}
  [data-name="Next project"] [data-name="Title"]{flex:none !important;width:100%}

  /* text: let fixed-width paragraphs and single-line labels wrap, and step the type scale down */
  .site p{max-width:100%}
  /* fixed-width text blocks and headings from the Figma export reflow instead of being clipped */
  .site [class*="break-word"][class*="w-["],.site [class*="font-['Manrope']"][class*="w-["]{width:auto !important;max-width:100%}
  .site .flex-col[class*="w-["]:not([class*="h-["]){width:auto !important;max-width:100%} /* text columns without a fixed height */
  [data-name="Project meta"]{flex-wrap:wrap;row-gap:8px !important;column-gap:20px !important}
  .site p[class*="w-["]{width:auto !important}
  .site p.whitespace-nowrap,.site .whitespace-nowrap > p{white-space:normal !important}
  .site [class*="text-[96px]"]{font-size:46px !important;letter-spacing:-1.6px !important}
  .site [class*="text-[60px]"]{font-size:32px !important;letter-spacing:-.8px !important}
  .site [class*="text-[48px]"]{font-size:32px !important;letter-spacing:-.8px !important}
  .site [class*="text-[40px]"]{font-size:27px !important;letter-spacing:-.5px !important}
  .site [class*="text-[26px]"],.site [class*="text-[24px]"]{font-size:21px !important}
  .site [class*="text-[22px]"]{font-size:19px !important}
  .site [class*="text-[20px]"]{font-size:17px !important}
  .site [class*="text-[19px]"],.site [class*="text-[18px]"],.site [class*="text-[17px]"]{font-size:16px !important}

  /* rows of equal columns (cards, two-up text) stack */
  .site .flex:not(.flex-col):has(> [class*="flex-[1_0_0]"]){flex-direction:column !important;align-items:stretch !important}
  .site .flex:not(.flex-col) > [class*="flex-[1_0_0]"]{flex:none !important;width:100% !important}

  .foot{flex-direction:column;gap:28px;padding:44px var(--gut) 56px}
  .foot > div:first-child p{width:auto}
  .mail{font-size:clamp(18px,5.2vw,26px)}
  .credits{width:auto;align-items:flex-start;text-align:left}
}
@media (max-width:380px){
  .head nav a{padding:0 7px;font-size:13px}
  .brand .name{font-size:26px}
}

/* wide screens (wider than the 1536px design, e.g. a 15" MacBook Air at 1710px):
   the dotted background, header, footer and next-project band run edge to edge,
   while the case study itself stays in the centered 1536px column.
   --side is the empty space on each side of that column. */
@media (min-width:1537px){
  .site{max-width:none;container-type:inline-size;background:url(img/v2/dots.png) 0 0/22px 22px,var(--bg)}
  .site > div{max-width:1536px;margin-inline:auto;background:none !important}
  .site > div > *{--side:max(0px,(100cqw - 1536px) / 2)}
  .site > div > [data-name="Dot fade"]{left:calc(-1 * var(--side)) !important;right:calc(-1 * var(--side)) !important}
  .site .head,.site .foot,.site .next-link{width:auto;margin-inline:calc(-1 * var(--side))}
  .site .head{padding-left:calc(19px + var(--side));padding-right:calc(80px + var(--side))}
  .site .foot{padding-left:calc(56px + var(--side));padding-right:calc(80px + var(--side))}
  .site .next-link{padding-inline:var(--side)}
}