/* Kaye brand home.
   Two source frames: 1160 wide above 760, 390 wide at 760 and below.
   Every length is written in frame pixels times --u, so the page matches the
   frame exactly at its own width and scales as one surface in between.
   home.js keeps --u in step with the real page width (scrollbar excluded). */

:root{
  --u:calc(100vw / 1160);
  --ink:#111;
  --muted:#6e6e6e;
  --chip:#f1f1ef;
  --tile:#f2f2f2;
  --paper:#fff;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:760px){
  :root{--u:calc(100vw / 390)}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block}
h1,h2,p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.about-btn[aria-expanded="true"]:focus-visible,
.essay-close:focus-visible{outline-color:var(--ink);outline-offset:3px}

.page{padding:0 calc(24 * var(--u))}

/* ---------- Header ---------- */
.head{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(20 * var(--u));
  padding:calc(88 * var(--u)) 0 calc(56 * var(--u));
}
.title{
  font-family:var(--serif);font-weight:500;
  font-size:calc(80 * var(--u));line-height:1;
  letter-spacing:calc(-0.8 * var(--u));
}
.line{font-size:calc(20 * var(--u));line-height:1.4}
.tags{display:flex;gap:calc(8 * var(--u))}
.tags li{
  background:var(--chip);color:var(--muted);
  font-size:calc(13 * var(--u));line-height:calc(16 * var(--u));
  padding:calc(6 * var(--u)) calc(12 * var(--u));
  border-radius:999px;white-space:nowrap;
}

/* ---------- About button (follows the scroll) ---------- */
.about-btn{
  position:fixed;z-index:10;
  top:calc(24 * var(--u));right:calc(24 * var(--u));
  display:flex;align-items:center;gap:calc(10 * var(--u));
  padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
  border-radius:999px;
  background:var(--chip);color:var(--ink);
  font-size:calc(14 * var(--u));font-weight:500;line-height:normal;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease;
}
.about-icon{font-size:calc(18 * var(--u));font-weight:400;line-height:1;width:calc(12 * var(--u));text-align:center}
.about-btn[aria-expanded="true"]{background:var(--ink);color:#fff}

/* ---------- Work ---------- */
.body{padding-top:calc(16 * var(--u))}
.work{
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(16 * var(--u));
}
.tile{
  position:relative;overflow:hidden;
  aspect-ratio:var(--ar);
  background:var(--tile);
}
.tile img,.tile picture,.tile video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.tile video{opacity:0;transition:opacity .3s ease}
.tile video.on{opacity:1}
.wide{grid-column:1 / -1}

/* Pull quotes: padding and measure per quote (--pt, --pb, --w in frame px),
   set left, centered or right as in the wide frame. */
.quote{
  grid-column:1 / -1;
  padding:calc(var(--pt) * var(--u)) 0 calc(var(--pb) * var(--u));
}
.quote p{
  width:calc(var(--w) * var(--u));
  font-family:var(--serif);font-weight:400;
  font-size:calc(34 * var(--u));line-height:1.18;
}
.q-center p{margin:0 auto;text-align:center}
.q-right p{margin-left:auto}
.q-end{margin-top:calc(16 * var(--u))}

/* ---------- Essay ---------- */
.essay{display:none}
.essay-bar,.essay-title{display:none}
.essay-label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.essay-text{font-size:calc(15 * var(--u));line-height:calc(20 * var(--u));color:#111}
/* Paragraphs sit one empty line apart, as in the frames: 16 + 20 + 16. */
.essay-text p+p{margin-top:calc(52 * var(--u))}

/* ---------- End ---------- */
.end{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-top:calc(16 * var(--u));
  padding:calc(176 * var(--u)) 0 calc(120 * var(--u));
  color:inherit;text-decoration:none;
}
.end-rule{display:block;width:100%;height:1px;background:var(--ink)}
.end-label{margin-top:calc(24 * var(--u));font-size:calc(14 * var(--u));line-height:calc(17 * var(--u));color:var(--muted)}
.end-title{
  margin-top:calc(12 * var(--u));
  font-family:var(--serif);font-weight:500;
  font-size:calc(72 * var(--u));line-height:1;letter-spacing:calc(-0.72 * var(--u));
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:.12em;
  transition:text-decoration-color .3s ease;
}
.end-line{margin-top:calc(16 * var(--u));font-size:calc(20 * var(--u));line-height:1.4}
.end-media{
  display:block;position:relative;overflow:hidden;width:100%;
  margin-top:calc(40 * var(--u));
  aspect-ratio:var(--ar);background:var(--tile);
}
.end-media img,.end-media picture,.end-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.end-media video{opacity:0;transition:opacity .3s ease}
.end-media video.on{opacity:1}
.end:hover .end-title{text-decoration-color:currentColor}

/* ---------- About open, wide frame ----------
   Images collapse into the left half, the essay takes the right half.
   The essay scrolls with the page until its last line meets the bottom of
   the view, then stays put (top is set in home.js). */
@media (min-width:761px){
  .page[data-about="open"] .body{
    display:grid;grid-template-columns:calc(548 * var(--u)) calc(540 * var(--u));
    column-gap:calc(24 * var(--u));align-items:start;
    padding-top:0;
  }
  .page[data-about="open"] .work{grid-template-columns:1fr}
  .page[data-about="open"] .wide{grid-column:auto}
  .page[data-about="open"] .quote{padding:calc(80 * var(--u)) 0}
  .page[data-about="open"] .quote p{margin:0;width:calc(548 * var(--u));text-align:left}
  .page[data-about="open"] .q-end{margin-top:0}
  .page[data-about="open"] .essay{
    display:block;position:sticky;top:calc(86 * var(--u));
  }
  .page[data-about="open"] .end{margin-top:0}
}

/* ---------- Phone frame (390) ---------- */
@media (max-width:760px){
  .page{padding:0 calc(16 * var(--u))}
  .head{gap:calc(14 * var(--u));padding:calc(80 * var(--u)) 0 calc(32 * var(--u))}
  .title{font-size:calc(52 * var(--u));letter-spacing:calc(-0.52 * var(--u))}
  .line{font-size:calc(17 * var(--u))}

  .about-btn{
    top:calc(16 * var(--u));right:calc(16 * var(--u));
    padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
    font-size:calc(13 * var(--u));
  }

  .body{padding-top:calc(12 * var(--u))}
  .work{column-gap:calc(16 * var(--u));row-gap:calc(12 * var(--u))}
  .ph-wide{grid-column:1 / -1}
  .film{aspect-ratio:358 / 636}
  .flip{aspect-ratio:358 / 448}

  .quote{padding:calc(72 * var(--u)) 0 calc(72 * var(--u)) calc(40 * var(--u))}
  .quote p{margin:0;width:calc(318 * var(--u));font-size:calc(27 * var(--u));text-align:left}
  .q-end{margin-top:calc(12 * var(--u))}

  /* About covers the whole screen */
  .page[data-about="open"] .essay{
    display:block;position:fixed;inset:0;z-index:20;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);
    padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(56 * var(--u));
  }
  .essay-bar{display:flex;align-items:center;justify-content:space-between}
  .essay-label{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    font-size:calc(14 * var(--u));font-weight:500;line-height:normal;
  }
  .essay-close{
    display:flex;align-items:center;justify-content:center;
    padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
    border-radius:999px;background:var(--ink);color:#fff;
    font-size:calc(22 * var(--u));line-height:1;
  }
  .essay-title{
    display:block;margin-top:calc(40 * var(--u));
    font-family:var(--serif);font-weight:500;
    font-size:calc(40 * var(--u));line-height:1;letter-spacing:calc(-0.4 * var(--u));
  }
  .essay-text{margin-top:calc(24 * var(--u))}

  .end{
    margin-top:calc(12 * var(--u));
    padding:calc(112 * var(--u)) 0 calc(64 * var(--u));
  }
  .end-label{margin-top:calc(20 * var(--u));font-size:calc(13 * var(--u));line-height:calc(16 * var(--u))}
  .end-title{margin-top:calc(8 * var(--u));font-size:calc(46 * var(--u));letter-spacing:calc(-0.46 * var(--u))}
  .end-line{margin-top:calc(12 * var(--u));font-size:calc(17 * var(--u));line-height:1.45}
  .end-media{margin-top:calc(28 * var(--u));aspect-ratio:var(--arp)}
}

html.lock,html.lock body{overflow:hidden}

/* ---------- Opening and closing ---------- */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.3s;animation-timing-function:ease;
}
@keyframes essay-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-in{from{opacity:0;transform:translateY(calc(16 * var(--u)))}to{opacity:1;transform:none}}
.page.animate[data-about="open"] .essay{animation:essay-in .3s ease both}
@media (max-width:760px){
  .page.animate[data-about="open"] .essay{animation-name:sheet-in}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ---------- Live lockups ----------
   Built like the Figma master lockups: raster symbol, vector wordmark, live type.
   --s is one lockup unit (standard lockup = 192 units tall) in page pixels,
   set per tile as a share of the tile width, so it scales with the tile. */
.tile.lockup{container-type:inline-size}
.lk{
  position:absolute;display:flex;align-items:center;
  gap:calc(16 * var(--s));color:#111;
  line-height:normal;white-space:nowrap;
}
.lk-v{flex-direction:column}
.ink-white{color:#fff}
.lk-sym{position:relative;flex:none;width:calc(192 * var(--s));height:calc(192 * var(--s))}
.lk-sym img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lk-sym.wc img{left:1.01%;width:97.98%}
.lk-sym svg{position:absolute;left:0.2125%;top:-0.94%;width:99.58%;height:101.88%;overflow:visible}
.lk-type{display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--s))}
.lk-row .lk-type{flex-direction:row;gap:calc(20 * var(--s))}
.lk-word{display:block;flex:none;width:calc(164 * var(--s));height:calc(54.2668 * var(--s));fill:currentColor}
.lk-desc{
  font-family:var(--sans);font-weight:500;
  font-size:calc(16 * var(--s));letter-spacing:calc(3 * var(--s));
  margin-right:calc(-3 * var(--s));
}
.lk-partner{display:flex;align-items:center;gap:calc(16 * var(--s));font-family:var(--serif);font-weight:400}
.lk-for{font-style:italic;font-size:calc(18 * var(--s))}
.lk-name{font-size:calc(36 * var(--s));letter-spacing:calc(5 * var(--s));margin-right:calc(-5 * var(--s))}
.lk-row .lk-for{font-size:calc(22 * var(--s))}
.lk-row .lk-name{font-size:calc(60 * var(--s))}
.tile.dark{background:#141414}
/* Small master: symbol 96, wordmark 82, gap 8, type 12/1.5, partner 12/22 (inline 12/30, gap 10) */
.lk-small{gap:calc(8 * var(--s))}
.lk-small .lk-sym{width:calc(96 * var(--s));height:calc(96 * var(--s))}
.lk-small .lk-type{gap:calc(8 * var(--s))}
.lk-small .lk-word{width:calc(82 * var(--s));height:calc(27.1334 * var(--s))}
.lk-small .lk-desc{font-size:calc(12 * var(--s));letter-spacing:calc(1.5 * var(--s));margin-right:calc(-1.5 * var(--s))}
.lk-small .lk-partner{gap:calc(8 * var(--s))}
.lk-small .lk-for{font-size:calc(12 * var(--s))}
.lk-small .lk-name{font-size:calc(22 * var(--s))}
.lk-small.lk-row .lk-type{gap:calc(10 * var(--s))}
.lk-small.lk-row .lk-name{font-size:calc(30 * var(--s))}
.tile.episode > img.base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ep-sym{position:absolute;object-fit:contain}
@media (max-width:760px){ .panel{aspect-ratio:var(--arp)} }
/* Fluttering episode: the symbol lives in the video, the slot keeps its place for the wordmark */
.tile.flutter .lk{z-index:1}
.tile.flutter .lk-sym{visibility:hidden}