/* Rewan Kakil — practice site.
   Gallery white. The page is paper; the photographs supply every colour
   on it. Type is set to carry long testimony without tiring the reader,
   and every layout decision gives the image more room than the words. */

:root{
  --paper:#FBFAF8;
  --paper-2:#F3F1ED;
  --ink:#191714;
  --soft:#5E574E;
  --faint:#958D82;
  --rule:#E2DED7;
  --accent:#8A4B2F;
  --frame-a:#EFECE6;
  --frame-b:#E4E0D8;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --measure:38rem;
  --wide:84rem;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141311;--paper-2:#1C1A17;--ink:#F0EDE7;--soft:#A79E92;
    --faint:#746C62;--rule:#2C2924;--accent:#C9805C;
    --frame-a:#201E1A;--frame-b:#2A2722;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141311;--paper-2:#1C1A17;--ink:#F0EDE7;--soft:#A79E92;
  --faint:#746C62;--rule:#2C2924;--accent:#C9805C;
  --frame-a:#201E1A;--frame-b:#2A2722;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:1.0625rem;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto;
  height:env(safe-area-inset-top,0px);z-index:30;background:var(--paper);
}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.14;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{
  max-width:var(--wide);margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.measure{max-width:var(--measure)}
.label{
  font-family:var(--display);font-size:.6875rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}

/* ---------------- header ---------------- */
header.site{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:29;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 2rem;padding-block:1.1rem}
.wordmark{
  font-family:var(--display);font-weight:400;font-size:1.3125rem;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;margin-right:auto;
}
nav.site{display:flex;flex-wrap:wrap;gap:1.6rem}
nav.site a{
  font-family:var(--display);font-size:.6875rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--soft);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
nav.site a:hover,nav.site a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------------- opening ---------------- */
.opening{padding-block:5.5rem 3.5rem}
.opening h1{font-size:clamp(2.5rem,7.5vw,5rem);letter-spacing:-.015em;max-width:15ch}
.opening .lede{margin-top:2.25rem;max-width:var(--measure);font-size:1.125rem;color:var(--soft)}
.opening .lede p+p{margin-top:1.1rem}
.opening .where{margin-bottom:1.75rem}

/* ---------------- sections ---------------- */
section{border-top:1px solid var(--rule)}
section .wrap{padding-block:4.5rem}
.sec-head{margin-bottom:3rem;max-width:var(--measure)}
.sec-head h2{font-size:clamp(1.6rem,3.6vw,2.25rem)}
.sec-head p{color:var(--soft);font-size:.9375rem;margin-top:.75rem}

/* ---------------- project index ----------------
   The photograph runs the full width of the page and the words sit
   beneath it, small and out of the way. On a photography site the
   picture is the headline. */
.proj-list{display:grid;gap:6rem}
.proj{display:block;text-decoration:none;color:inherit}
.proj .shot{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-height:82vh;overflow:hidden;background:transparent;
}
.proj .shot img{
  width:auto;height:auto;max-width:100%;max-height:82vh;
  object-fit:contain;display:block;
}
.proj .shot .empty{
  position:static;width:100%;aspect-ratio:3/2;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--frame-a),var(--frame-b));
}
.proj .meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2.5rem;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);
}
.proj .kicker{
  font-family:var(--display);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums;
  flex:0 0 100%;
}
.proj h3{font-size:clamp(1.5rem,3.4vw,2.125rem);flex:0 1 auto}
.proj .blurb{color:var(--soft);font-size:.9375rem;flex:1 1 22rem;min-width:0;max-width:40ch}
.proj .go{
  font-family:var(--display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap;
}
.proj:hover h3{color:var(--accent)}

.empty{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding:1rem;font-size:.6875rem;
  background:linear-gradient(150deg,var(--frame-a),var(--frame-b));
}

/* ---------------- a single project ---------------- */
.detail-head{padding-block:4.5rem 3rem}
.backlink{
  font-family:var(--display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;display:inline-block;margin-bottom:2.5rem;
}
.backlink:hover{color:var(--accent)}
.detail-head .kicker{font-family:var(--display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.detail-head h1{font-size:clamp(2.3rem,6.5vw,4.25rem);letter-spacing:-.015em;margin-top:1rem;max-width:16ch}
.detail-statement{margin-top:2.25rem;max-width:var(--measure);font-size:1.0625rem}
.detail-statement p+p{margin-top:1.1rem}

.facts{list-style:none;padding:0;margin:2.5rem 0 0;max-width:var(--measure);border-top:1px solid var(--rule)}
.facts li{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;align-items:baseline;padding-block:.85rem;border-bottom:1px solid var(--rule);font-size:.9375rem}
.facts li.cont{padding-top:0;border-top:0;margin-top:-.45rem}
.facts .k{font-family:var(--display);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);flex:0 0 9rem}
.facts .v{flex:1 1 16rem;min-width:0;color:var(--soft)}


/* ---------------- series ---------------- */
.series{border:0}
.series .wrap{padding-block:0;margin-bottom:6rem}
.series-head{max-width:var(--measure);margin-bottom:2.5rem}
.series-count{font-family:var(--display);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.series-head h2{font-size:clamp(1.6rem,3.8vw,2.375rem);margin-top:.7rem}
.series-head .note{font-family:var(--display);font-size:.8125rem;letter-spacing:.04em;color:var(--faint);margin-top:.6rem;font-style:italic}
.series-text{margin-top:1.5rem}
.series-text p.body{color:var(--soft)}
.series-text p.body+p.body{margin-top:.95rem}

/* full-width plates: the image gets the page, the text a narrow column */
.plates{display:grid;gap:5rem}
.plates.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:2.5rem}
.plate{margin:0;min-width:0}
.work-shot{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:0;border:0;cursor:zoom-in;background:transparent;
  max-height:84vh;overflow:hidden;
}
.work-shot img{width:auto;height:auto;max-width:100%;max-height:84vh;object-fit:contain;display:block}
.work-shot .empty{width:100%;aspect-ratio:3/2;max-height:84vh}
/* grids never crop: a tile is as tall as its photograph needs */
.plates.grid{align-items:start}
.plates.grid .work-shot{max-height:72vh}
.plates.grid .work-shot img{width:100%;height:auto;max-height:72vh;object-fit:contain}

.work-text{max-width:var(--measure);margin-top:1.5rem}
.work-text h3{font-family:var(--display);font-weight:400;font-size:1.375rem}
.work-text .note{font-family:var(--display);font-size:.75rem;letter-spacing:.05em;color:var(--faint);margin-top:.5rem;line-height:1.5}
.work-text .pull{
  font-family:var(--display);font-size:1.375rem;line-height:1.42;font-style:italic;
  color:var(--ink);margin-top:1.4rem;padding-left:1.25rem;border-left:1px solid var(--accent);
}
.work-text p.body{margin-top:1.1rem;color:var(--soft)}
.work-text p.body+p.body{margin-top:.95rem}
.plates.grid .work-text{margin-top:1rem}
.plates.grid .work-text h3{font-size:1.0625rem}
.plates.grid .work-text p.body{font-size:.9375rem}

.glossary-label{font-family:var(--display);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:2rem}
.glossary{margin:.9rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--rule);display:grid;gap:.9rem}
.glossary dt{font-family:var(--display);font-size:1.0625rem;color:var(--ink)}
.glossary dd{margin:.2rem 0 0;font-size:.9375rem;color:var(--soft)}

/* ---------------- lightbox ---------------- */
.lightbox{
  position:fixed;inset:0;z-index:50;background:var(--paper);
  display:grid;grid-template-columns:1fr minmax(20rem,28rem);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.lb-stage{display:flex;align-items:center;justify-content:center;padding:2.5rem;min-width:0;min-height:0;background:var(--paper-2)}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-stage .empty{width:min(100%,36rem);aspect-ratio:3/2}
.lb-side{overflow-y:auto;padding:3rem 2.25rem;border-left:1px solid var(--rule);display:flex;flex-direction:column;min-width:0}
.lb-side h2{font-size:1.5rem}
.lb-side .note{font-family:var(--display);font-size:.75rem;color:var(--faint);margin-top:.5rem;line-height:1.5;font-style:italic}
.lb-side p.body{color:var(--soft);margin-top:1rem}
.lb-bar{display:flex;gap:.5rem;align-items:center;margin-top:auto;padding-top:2rem}
.lb-btn{
  font-family:var(--display);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);padding:.55rem .9rem;cursor:pointer;
}
.lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-count{font-family:var(--display);font-size:.6875rem;color:var(--faint);margin-left:auto;font-variant-numeric:tabular-nums}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1.25rem);right:1.25rem;z-index:2}
@media (max-width:760px){
  .lightbox{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}
  .lb-stage{padding:4rem 1rem 1rem}
  .lb-side{border-left:0;border-top:1px solid var(--rule);overflow:visible;padding:1.75rem max(16px,env(safe-area-inset-left,0px)) 3rem}
  /* on a phone the controls follow the text instead of sinking to the floor */
  .lb-bar{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
  .lb-btn{padding:.7rem 1.1rem}
}

/* ---------------- film ---------------- */
.films{display:grid;gap:4rem}
.film{display:grid;gap:1rem;max-width:62rem}
.film .frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--paper-2);border:1px solid var(--rule)}
.film .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .frame .pending{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding:1.5rem;
}
.film-text{max-width:var(--measure)}
.film h3{font-size:1.375rem}
.film .meta{font-family:var(--body);font-size:.875rem;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:.45rem;font-style:italic}
.film p{font-size:.9375rem;color:var(--soft);margin-top:.9rem}
.film a.watch{font-family:var(--display);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;justify-self:start;margin-top:.3rem}

/* ---------------- record ---------------- */
.cv-group{margin-bottom:3rem;max-width:var(--measure)}
.cv-group:last-child{margin-bottom:0}
.cv-group h3{font-size:1.1875rem;margin-bottom:.9rem}
.credit{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;align-items:baseline;padding-block:1rem;border-bottom:1px solid var(--rule)}
.credit:first-of-type{border-top:1px solid var(--rule)}
.credit .who{font-family:var(--display);font-size:1.0625rem;flex:1 1 11rem;min-width:0}

.credit .what{color:var(--soft);font-size:.9375rem;flex:2 1 16rem;min-width:0}
.credit .when{font-family:var(--display);font-size:.6875rem;letter-spacing:.1em;color:var(--faint);font-variant-numeric:tabular-nums}

.bio-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.bio-grid p+p{margin-top:1.1rem}
.bio-grid .measure p{color:var(--soft)}

footer.site{border-top:1px solid var(--rule);background:var(--paper-2)}
footer.site .wrap{padding-block:3rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
footer.site p{font-size:.9375rem;color:var(--soft);margin-top:.7rem}
footer.site a{
  color:var(--soft);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
footer.site a:hover{color:var(--ink);text-decoration-thickness:2px}

/* links inside a record row */



/* ---------- portrait beside its testimony ----------
   One person per row, every row built the same way, so eight accounts
   read as a set rather than a ragged grid. */
.plates.duo{display:grid;gap:4.5rem}
.plates.duo .plate{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:2.5rem;align-items:start;
}
.plates.duo .work-shot{max-height:none}
.plates.duo .work-shot img{width:100%;height:auto;max-height:none}
.plates.duo .work-text{margin-top:0;max-width:none}
.plates.duo .work-text h3{font-size:1.25rem}
.plates.duo .work-text p.body{margin-top:.9rem;font-size:1rem}
@media (max-width:860px){
  .plates.duo .plate{grid-template-columns:1fr;gap:1.25rem}
}

/* ---------- click-to-play film ---------- */
.play{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:var(--paper-2);display:block;overflow:hidden;
}
.play img{width:100%;height:100%;object-fit:cover;display:block}
.play .play-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:4.5rem;height:4.5rem;border-radius:50%;
  background:rgba(251,250,248,.92);
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.play .play-mark::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:1.15rem solid var(--ink);
  border-top:.72rem solid transparent;border-bottom:.72rem solid transparent;
}
.play .play-label{
  position:absolute;left:1rem;bottom:1rem;
  font-family:var(--display);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:#FBFAF8;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.play:hover .play-mark{background:#fff}

/* the contact address, set to be read and copied */
.email{margin-top:.6rem!important;font-size:1.0625rem}
.email a{
  font-family:var(--display);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
.email a:hover{color:var(--accent)}


/* ---------- links read as links ----------
   A hairline in --rule is invisible against --paper, so anything
   clickable in running text gets a real underline in the accent. */
.facts a.factlink,
.credit .who a,
.credit .what a,
.detail-statement a,
.series-text a,
.work-text a,
.bio-grid a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
}
.facts a.factlink:hover,
.credit .who a:hover,
.credit .what a:hover,
.detail-statement a:hover,
.series-text a:hover,
.work-text a:hover,
.bio-grid a:hover{
  color:var(--accent);
  text-decoration-thickness:2px;
}
/* a linked entry title carries a little more weight */
.credit .who a{text-decoration-color:var(--accent)}

/* ---------- phone ----------
   Checked at 375 and 390 px. The project row stacks so the title,
   the line of description and the link each get their own line
   instead of fighting for a third of the width. */
@media (max-width:700px){
  .opening{padding-block:3.5rem 2.5rem}
  .opening h1{font-size:clamp(2rem,9vw,2.75rem);max-width:none}
  .opening .lede{font-size:1.0625rem;margin-top:1.75rem}
  section .wrap{padding-block:3rem}
  .sec-head{margin-bottom:2rem}

  /* keep the sticky header to one tidy line */
  header.site .wrap{padding-block:.75rem;gap:.35rem 1rem}
  .wordmark{font-size:1rem;letter-spacing:.12em;flex:0 0 100%;margin-right:0}
  nav.site{gap:.9rem;row-gap:.4rem;width:100%}
  nav.site a{font-size:.625rem;letter-spacing:.1em}

  .proj-list{gap:3.5rem}
  .proj .shot,.proj .shot img{max-height:62vh}
  .proj .meta{display:block;margin-top:1.1rem;padding-top:1rem}
  .proj h3{display:block;margin-top:.5rem}
  .proj .blurb{display:block;max-width:none;margin-top:.5rem}
  .proj .go{display:inline-block;margin-top:.9rem}

  .detail-head{padding-block:3rem 2rem}
  .detail-head h1{font-size:clamp(1.9rem,8.5vw,2.75rem);max-width:none}
  .detail-statement{margin-top:1.75rem}

  .facts li{display:block;padding-block:.7rem}
  .facts .k{display:block;margin-bottom:.15rem}
  .facts .v{display:block}

  .credit{display:block;padding-block:.9rem}
  .credit .who{display:block}
  .credit .what{display:block;margin-top:.2rem}
  .credit .when{display:block;margin-top:.25rem}

  .series .wrap{margin-bottom:3.5rem}
  .series-head{margin-bottom:1.75rem}
  .plates{gap:3rem}
  .plates.grid{gap:2rem}
  .work-shot,.work-shot img{max-height:70vh}
  .work-text{margin-top:1.1rem}
  .work-text .pull{font-size:1.1875rem}

  .films{gap:2.75rem}
  .play .play-mark{width:3.5rem;height:3.5rem}
  .play .play-mark::after{border-left-width:.9rem;border-top-width:.56rem;border-bottom-width:.56rem}

  /* uppercase labels need a touch more size on a small screen */
  .label,.detail-head .kicker,.proj .kicker{font-size:.75rem;letter-spacing:.16em}
  .cv-group{margin-bottom:2.25rem}
  footer.site .wrap{padding-block:2.25rem;gap:1.5rem}
}