/* ============================================================
   karankapoor.net
   Cadmium yellow #FDDA0D · pure black · white
   Fraunces (display) · Literata (text)
   Lenis smooth scroll · zoom hovers · draw-on underlines
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-600-italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('../fonts/Literata-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('../fonts/Literata-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Literata';src:url('../fonts/Literata-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('../fonts/Literata-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --r:6px;
  --yellow:#FDDA0D;
  --ink:#000000;
  --paper:#ffffff;
  color-scheme:light dark;
  /* page tokens (light) */
  --bg:#ffffff;
  --fg:#000000;
  --rule:rgba(0,0,0,.15);
  --rule-y:rgba(0,0,0,.25);
  --rule-inv:rgba(255,255,255,.22);
  --muted:rgba(0,0,0,.56);
  --muted-inv:rgba(255,255,255,.64);
  /* the yellow surfaces (cover, title bands) */
  --band-bg:#FDDA0D;
  --band-fg:#000000;
  --band-head:#000000;
  --band-muted:rgba(0,0,0,.62);
  --band-rule:rgba(0,0,0,.25);
  --band-border:transparent;
  /* highlight hover */
  --hl-bg:#FDDA0D;
  --hl-fg:#000000;
  --sel-bg:#000000;
  --sel-fg:#FDDA0D;
  --thirst-border:transparent;
}
@media (prefers-color-scheme: dark){
  :root{
    /* the Night Edition: black page, yellow display type */
    --bg:#0b0a08;
    --fg:#f5f2e9;
    --rule:rgba(255,255,255,.2);
    --muted:rgba(245,242,233,.62);
    --band-bg:#0b0a08;
    --band-fg:#f5f2e9;
    --band-head:#FDDA0D;
    --band-muted:rgba(245,242,233,.62);
    --band-rule:rgba(255,255,255,.2);
    --band-border:rgba(255,255,255,.2);
    --sel-bg:#FDDA0D;
    --sel-fg:#000000;
    --thirst-border:rgba(255,255,255,.2);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Literata',Georgia,serif;
  font-size:1.15rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.on-dark a:focus-visible{outline-color:var(--yellow)}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
.wrap{max-width:68rem;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3rem)}
img{max-width:100%;height:auto;display:block;border-radius:var(--r)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--ink);color:var(--yellow);padding:.7rem 1.2rem;border-radius:0 0 8px 0;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- text links: yellow underline, wash on hover ---------- */
.tlink{color:var(--fg);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.tlink:hover{background:var(--yellow);color:var(--ink);text-decoration-color:var(--ink)}
.on-dark .tlink{color:var(--paper);text-decoration-color:var(--yellow);text-decoration-thickness:2px}
.on-dark .tlink:hover{background:var(--yellow);color:var(--ink)}

/* ---------- header / nav ---------- */
.site-head{display:flex;justify-content:space-between;align-items:baseline;padding-block:1.5rem}
.site-head .mark{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;
  color:inherit;text-decoration:none;
}
a.site-head-mark-link, .site-head a.mark{
  display:inline;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;
  transition:background-size .28s cubic-bezier(.2,.8,.2,1);
}
.site-head a.mark:hover{background-size:100% 1.5px}
.site-head nav ul{list-style:none;display:flex;gap:2.1rem}
.site-head nav a{
  color:inherit;text-decoration:none;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  font-family:'Fraunces',Georgia,serif;padding-bottom:.25rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1.5px;background-position:0 100%;
  transition:background-size .28s cubic-bezier(.2,.8,.2,1);
}
.site-head nav a:hover{background-size:100% 1.5px}
.site-head nav a[aria-current]{background-image:linear-gradient(var(--yellow),var(--yellow));background-size:100% 1.5px}
.on-yellow .site-head nav a[aria-current]{background-image:linear-gradient(var(--band-head),var(--band-head))}

/* ---------- button: black pill w/ yellow text; hover inverts + zooms ---------- */
.btn{
  display:inline-block;
  background:var(--ink);color:var(--yellow);text-decoration:none;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.95rem 2.1rem;border-radius:8px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background-color .22s, color .22s;
}
.btn:hover{transform:scale(1.055);background:var(--yellow);color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
.on-dark .btn{background:var(--yellow);color:var(--ink)}
.on-dark .btn:hover{transform:scale(1.055);background:var(--ink);color:var(--yellow);outline:2px solid var(--yellow);outline-offset:-2px}

/* ---------- kickers ---------- */
.kicker{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.on-dark .kicker{color:var(--yellow)}

/* ---------- blurbs ---------- */
blockquote.blurb{max-width:52rem}
blockquote.blurb p{font-size:1.12rem;line-height:1.66;text-wrap:pretty}
blockquote.blurb p::before{content:"";display:block;width:3.5rem;height:4px;background:var(--yellow);margin-bottom:1.2rem}
blockquote.blurb cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;
}
blockquote.blurb cite::before{content:"— "}

/* ---------- footer: icons + envelope w/ opening flap ---------- */
.site-foot{background:var(--ink);color:var(--yellow);padding-block:2.6rem 3rem;border-top:1px solid var(--thirst-border)}
.site-foot .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.4rem}
.site-foot .place{font-style:italic;font-size:.98rem;color:var(--muted-inv)}
.site-foot .links{display:flex;gap:1.9rem;flex-wrap:wrap;align-items:center}
.icon-link{
  display:grid;place-items:center;color:var(--yellow);text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), color .22s;
}
.icon-link:hover{transform:scale(1.15);color:#fff}
.icon-link svg{display:block;overflow:visible}
.logo-mask{
  display:block;background:currentColor;
  -webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;
  mask-position:center;mask-size:contain;mask-repeat:no-repeat;
}
.logo-op{width:27px;height:29px;-webkit-mask-image:url('../img/op-logo.png');mask-image:url('../img/op-logo.png')}
.logo-sp{width:24px;height:32px;-webkit-mask-image:url('../img/sp-logo.png');mask-image:url('../img/sp-logo.png')}
.mail-link .m-body{fill:none;stroke:currentColor;stroke-width:2.2}
.mail-link .m-flap{
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transform-box:view-box;transform-origin:17px 2.5px;
  transition:transform .35s cubic-bezier(.3,1.3,.4,1);
}
.mail-link:hover .m-flap{transform:translateY(-4px) scaleY(-1)}

/* ---------- baseline-rise reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .rise{overflow:clip}
  .rise[data-hidden] > *{display:block;transform:translateY(1.1em);opacity:0}
  .rise.revealed > *{display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .4s ease;transform:translateY(0);opacity:1}
}

/* ============================================================ home */
.cover{min-height:100svh;background:var(--band-bg);color:var(--band-fg);display:flex;flex-direction:column}
.cover > .wrap{width:100%} /* auto side-margins cancel flex stretch */
.cover .middle{flex:1;display:flex;align-items:center;padding-block:2.5rem}
.cover .grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;width:100%}
.cover h1{
  font-family:'Fraunces',Georgia,serif;font-weight:900;line-height:.95;letter-spacing:-.01em;
  font-size:clamp(3.2rem,9vw,7.5rem);text-transform:uppercase;
  font-variation-settings:'opsz' 144;color:var(--band-head);
}
.cover h1 span{display:block}
.cover .coverline{margin-top:1.8rem;font-size:1.15rem;font-style:italic}
.cover .portrait img{border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.cover .foot{padding-bottom:1.8rem;border-top:1px solid var(--band-rule);padding-top:1.3rem;display:flex;justify-content:flex-end}
.cover .foot .down{
  font-family:'Fraunces',Georgia,serif;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--band-fg);text-decoration:none;white-space:nowrap;display:inline-block;transition:transform .18s;
}
.cover .foot .down:hover{transform:scale(1.06)}

.bio{padding-block:clamp(4rem,8vw,6.5rem)}
.bio p{font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.55;max-width:46rem;text-wrap:pretty}

.thirst{background:#000;color:#fff;padding-block:clamp(4rem,8vw,6.5rem);border-block:1px solid var(--thirst-border)}
.thirst h2{
  color:var(--yellow);font-family:'Fraunces',Georgia,serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,8.5vw,6.5rem);line-height:1;margin-top:1rem;letter-spacing:.02em;
  font-variation-settings:'opsz' 144;
}
.thirst .sub{margin-top:1.2rem;font-style:italic;font-size:1.2rem;color:var(--muted-inv)}
.thirst .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2.5rem,6vw,5rem);margin-top:3rem;align-items:start}
.thirst .about p{margin-bottom:1.4rem;max-width:60ch}
.thirst .about p:last-child{margin-bottom:0}
.thirst figcaption{margin-top:.85rem;font-size:.92rem;color:var(--muted-inv);font-style:italic}
.thirst .btnrow{margin-top:2.2rem}
.prizes{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--rule-inv);font-size:.98rem;color:var(--muted-inv);max-width:70ch}

.blurbs{padding-block:clamp(4rem,8vw,6.5rem)}
.blurbs blockquote.blurb{margin-top:3rem}

/* ============================================================ poems */
.band{background:var(--band-bg);color:var(--band-fg);border-bottom:1px solid var(--band-border)}
.band .titlebox{padding-block:clamp(2.5rem,6vw,4.5rem)}
.band h1{
  font-family:'Fraunces',Georgia,serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.8rem,8vw,6rem);line-height:1;letter-spacing:.01em;
  font-variation-settings:'opsz' 144;color:var(--band-head);
}
.ledger{padding-block:clamp(3rem,6vw,5rem)}
.poemlist{list-style:none;border-top:1px solid var(--rule)}
.poemlist li{border-bottom:1px solid var(--rule)}
.rowlink{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1.5rem;
  padding:1.35rem .35rem;text-decoration:none;color:var(--fg);
}
.rowlink .ptitle{
  font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(1.15rem,2vw,1.4rem);
  letter-spacing:.01em;line-height:1.35;display:inline;
  transition:background-color .22s;padding:.06em .18em;margin:-.06em -.18em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
a.rowlink:hover .ptitle{background-color:var(--hl-bg);color:var(--hl-fg)}
.rowlink .venue{font-style:italic;font-size:1.05rem;color:var(--muted);white-space:nowrap;transition:color .22s}
a.rowlink:hover .venue{color:var(--fg)}
.fiction-head{margin-top:3.5rem;margin-bottom:1rem}

/* ============================================================ photographs */
.epigraph{padding-block:clamp(2.6rem,5vw,4rem);text-align:center}
.epigraph p{font-size:clamp(1.25rem,2.4vw,1.6rem);font-style:italic}
.epigraph cite{display:block;margin-top:.5rem;font-style:normal;font-family:'Fraunces',Georgia,serif;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.grid{columns:3 18rem;gap:1.6rem;padding-bottom:clamp(3rem,6vw,5rem)}
.ph{break-inside:avoid;margin-bottom:1.6rem}
.ph a{display:block;border-radius:var(--r);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ph a:hover{transform:scale(1.03)}
.ph img{width:100%;border-radius:var(--r)}
.ph figcaption{margin-top:.55rem;font-style:italic;font-size:.95rem;color:var(--muted)}

/* lightbox: blurred page, tilt + directional flip */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(20,18,22,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb figure{max-width:min(90vw,1000px);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:.85rem;touch-action:pan-y}
.flipwrap{perspective:1600px;perspective-origin:50% 42%;cursor:pointer}
.cardtilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.flipper{position:relative;transform-style:preserve-3d}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px}
.lb img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.45);display:block}
.gloss{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%) no-repeat;
  background-size:240% 100%;background-position:125% 0}
.lb .back{position:absolute;inset:0;transform:rotateY(180deg);
  background:var(--ink);color:var(--paper);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:clamp(1.4rem,6%,2.6rem);overflow:hidden}
.flipper.landed .back{overflow:auto;pointer-events:auto}
.flipper.landed .face.front{pointer-events:none}
.lb .back .bkicker{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-inv);font-family:'Fraunces',Georgia,serif;font-weight:600}
.lb .back .btitle{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--yellow);font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.3;text-wrap:balance}
.lb .back .bpoet{font-style:italic;font-size:1.08rem;color:#fff}
.lb .back .bpoem{font-style:italic;font-size:1.02rem;line-height:1.72}
.lb .back .bpoem span{display:block}
.lb .back .bpoem .stanza-gap{height:.9em}
.lb .back .bpoem[hidden],.lb .back .bnote[hidden]{display:none}
.lb .back .bnote{margin-top:.6rem;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-inv);font-family:'Fraunces',Georgia,serif}
.lb figcaption{color:#fff;font-style:italic;font-size:1.08rem;transition:opacity .3s ease}
.lb figure.showing-back figcaption{opacity:0}
.lb .lb-btn{
  position:absolute;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:transform .26s cubic-bezier(.2,.85,.25,1), background-color .26s, color .26s;
}
.lb .lb-btn svg{display:block;transition:transform .26s cubic-bezier(.2,.85,.25,1)}
.lb .lb-btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:scale(1.07)}
.lb .lb-btn:hover svg{transform:scale(1.18)}
.lb .lb-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;margin-top:-19px}
.lb-next{right:1rem;top:50%;margin-top:-19px}
@media (prefers-reduced-motion:reduce){.cardtilt{transition:none}}

/* ============================================================ responsive */
@media (max-width:800px){
  .cover .grid{grid-template-columns:1fr;gap:2rem}
  .cover .portrait{max-width:19rem}
  .thirst .cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .rowlink{grid-template-columns:1fr;gap:.25rem}
  .rowlink .venue{white-space:normal}
}
@media (max-width:560px){
  .site-head{flex-direction:column;gap:1rem;align-items:flex-start}
  .lb-prev{left:.4rem}
  .lb-next{right:.4rem}
}