/* ============================================================
   Threshold — Ian Michael Flores
   Gallery white. Swiss grid. Motion built on the aperture.
   ============================================================ */

:root{
  /* A cool archival white — mat board, not cream. Pure #fff clips
     against images that already read as printed paper. */
  --paper:      #F4F5F7;
  --paper-deep: #EAECF0;
  --ink:        #14171E;
  --ink-mid:    #454B5A;
  --ink-soft:   #767D8D;
  --rule:       #D7DBE2;
  /* One accent, taken from his own archive: Sainte-Chapelle cobalt. */
  --cobalt:     #1E3EA8;

  --gut: clamp(20px, 4.5vw, 76px);   /* the gallery mat */
  --ease: cubic-bezier(.16,.84,.28,1);
  --iris: cubic-bezier(.62,.02,.24,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }

a{ color:inherit; text-decoration:none }

::selection{ background:var(--cobalt); color:#fff }

/* ---------- typographic roles ---------- */

.ui{
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
}

.serif{ font-family:"Newsreader",Georgia,serif }

/* ============================================================
   Chrome — a wordmark and four words. Nothing else.
   ============================================================ */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px;
  padding:22px var(--gut);
  mix-blend-mode:difference;      /* stays legible over any photograph */
  color:#fff;
  pointer-events:none;
}
.bar a{ pointer-events:auto }

.wordmark{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  white-space:nowrap;
}

.nav{ display:flex; gap:clamp(14px,2.4vw,30px) }
.nav a{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:500; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  opacity:.72; transition:opacity .22s var(--ease);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current]{ opacity:1 }

/* ============================================================
   Index — the whole body of work on one screen.
   A list, not a grid. Hover opens a preview from a hairline.
   ============================================================ */

.index{
  min-height:100svh;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.82fr);
  gap:var(--gut);
  padding: clamp(88px,14vh,150px) var(--gut) 56px;
  align-items:start;
}

.masthead{ margin-bottom:clamp(30px,6vh,66px) }
.masthead h1{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300; font-style:normal;
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  line-height:1.06; letter-spacing:-.021em;
  margin:0 0 18px; max-width:19ch; text-wrap:balance;
}
.masthead p{
  margin:0; max-width:46ch;
  color:var(--ink-mid); font-size:1.02rem;
}

/* the list */
.rows{ border-top:1px solid var(--ink) }

.row{
  display:grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap:clamp(10px,2vw,26px);
  align-items:baseline;
  padding:clamp(15px,2.1vh,24px) 0;
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:padding-left .42s var(--ease);
}
.row:hover, .row:focus-visible{ padding-left:14px; outline:none }
.row::after{                       /* a rule that draws itself in on hover */
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--cobalt);
  transition:width .5s var(--ease);
}
.row:hover::after, .row:focus-visible::after{ width:100% }

.row .n{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.row:hover .n{ color:var(--cobalt) }

.row .t{
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.32rem,2.5vw,2rem);
  line-height:1.1; font-weight:400; letter-spacing:-.014em;
}
.row .p{
  display:block; margin-top:5px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft);
}
.row .c{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; font-weight:500; letter-spacing:.11em;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.row.is-pending{ opacity:.42; pointer-events:none }

/* the preview panel */
.stage{
  position:sticky; top:clamp(88px,14vh,150px);
  aspect-ratio:3/2;
  background:transparent;
  overflow:hidden;
  padding-bottom:26px;
}
.stage figure{ position:absolute; inset:0; margin:0 }
.stage img{
  width:100%; height:100%; object-fit:contain;
  /* closed: a hairline across the middle. open: the whole frame. */
  clip-path: inset(50% 0 50% 0);
  transform:scale(1.06);
  transition:clip-path .52s var(--iris), transform .9s var(--ease);
}
.stage figure.on img{ clip-path: inset(0 0 0 0); transform:scale(1) }
.stage figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 2px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0; transition:opacity .4s var(--ease) .14s;
}
.stage figure.on figcaption{ opacity:1 }

.stage .hint{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:opacity .35s var(--ease);
}
.stage.has-on .hint{ opacity:0 }

/* ============================================================
   Project pages
   ============================================================ */

.opener{
  position:relative;
  height:100svh; width:100%;
  overflow:hidden;
  background:var(--ink);
}
.opener img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(.92);
  opacity:0;
  animation: settle 1.35s var(--ease) forwards;
}
@keyframes settle{ to{ transform:scale(1); opacity:1 } }

.opener .plate{
  position:absolute; left:var(--gut); bottom:clamp(38px,9vh,86px);
  right:var(--gut); z-index:3;
  color:#fff; mix-blend-mode:difference;
}
.plate .line{ overflow:hidden }
.plate .line > *{
  display:block;
  transform:translateY(105%);
  animation: rise .95s var(--ease) forwards;
}
.plate .line:nth-child(1) > *{ animation-delay:.42s }
.plate .line:nth-child(2) > *{ animation-delay:.52s }
.plate .line:nth-child(3) > *{ animation-delay:.60s }
@keyframes rise{ to{ transform:translateY(0) } }

.plate h1{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300; font-size:clamp(2.2rem,6.4vw,5rem);
  line-height:1; letter-spacing:-.028em; margin:0;
}
.plate .meta{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; margin-top:14px; opacity:.85;
}

.scroll-cue{
  position:absolute; left:50%; bottom:20px; z-index:3;
  transform:translateX(-50%);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; mix-blend-mode:difference; opacity:.6;
  animation: breathe 2.8s ease-in-out infinite 1.6s;
}
@keyframes breathe{ 50%{ opacity:.18 } }

/* the essay column */
.intro{
  padding: clamp(56px,12vh,120px) var(--gut) clamp(30px,6vh,60px);
  max-width:none;
}
.intro p{
  font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.44; font-weight:300;
  color:var(--ink); max-width:34ch; margin:0;
}

/* the sequence */
.seq{
  display:flex; flex-direction:column;
  gap:clamp(48px,11vh,128px);
  padding:0 var(--gut) clamp(80px,16vh,180px);
}

.frame{ margin:0 }
.frame .win{                 /* a fixed mask; the photograph drifts inside it */
  overflow:hidden;
  background:var(--paper-deep);
  position:relative;
}
.frame .win img{
  width:100%; height:auto; display:block;
  will-change:transform;
}
.frame figcaption{
  margin-top:11px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}

.frame.wide{ width:100% }
.frame.mid { width:min(100%, 78ch) }
.frame.pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,2.4vw,34px);
}
.frame.pair figure{ margin:0 }

/* reveal on entry */
.frame{ opacity:0; transform:translateY(26px); }
.frame.seen{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* next project */
.onward{
  border-top:1px solid var(--ink);
  margin:0 var(--gut);
  padding:clamp(32px,7vh,70px) 0 clamp(60px,12vh,130px);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap;
}
.onward .lbl{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.onward .to{
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.6rem,4vw,2.8rem); line-height:1;
  font-weight:300; letter-spacing:-.02em;
}

/* ============================================================
   Text pages — about, contact, prints, journal
   ============================================================ */

.page{
  padding: clamp(96px,16vh,170px) var(--gut) clamp(70px,14vh,150px);
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(28px,6vw,90px);
  align-items:start;
}
.page h1{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300; font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.02; letter-spacing:-.026em; margin:0;
  position:sticky; top:clamp(96px,16vh,170px);
}
.body p{ max-width:60ch; margin:0 0 20px }
.body p.big{ font-size:1.28rem; line-height:1.45; font-weight:300; max-width:44ch }
.body h2{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin:44px 0 14px;
}
.body a{ color:var(--cobalt); text-decoration:underline; text-underline-offset:3px;
         text-decoration-thickness:1px }

.portrait{ margin:0 0 30px; max-width:420px }
.portrait img{ width:100% }
.portrait figcaption{
  margin-top:9px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- form ---------- */

.form{ max-width:52ch; display:flex; flex-direction:column; gap:20px; margin-top:8px }
.f{ display:flex; flex-direction:column; gap:6px }
.f label{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft);
}
.f input, .f select, .f textarea{
  font-family:"Newsreader",Georgia,serif; font-size:1rem; color:var(--ink);
  background:transparent;
  border:none; border-bottom:1px solid var(--rule);
  padding:8px 0; border-radius:0;
  transition:border-color .3s var(--ease);
}
.f textarea{ resize:vertical; min-height:5.5em; line-height:1.5 }
.f input:focus, .f select:focus, .f textarea:focus{
  outline:none; border-bottom-color:var(--cobalt);
}
.f select{ appearance:none; cursor:pointer }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

button.send{
  align-self:flex-start; margin-top:6px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:0;
  padding:13px 26px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
button.send:hover, button.send:focus-visible{ background:var(--cobalt); border-color:var(--cobalt) }

.f input[aria-invalid], .f select[aria-invalid], .f textarea[aria-invalid]{
  border-bottom-color:var(--ink);
}
.err{
  margin:0;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:11px; letter-spacing:.04em; line-height:1.5; color:var(--ink);
}
button.send[disabled]{ opacity:.45; cursor:default }
button.send[disabled]:hover{ background:var(--ink); border-color:var(--ink) }

.sent{
  border-left:2px solid var(--cobalt); padding:16px 20px;
  background:#fff; max-width:52ch;
}
.sent p{ margin:0 }

/* ---------- prints ---------- */

.shop{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:clamp(20px,3.4vw,46px);
  padding:0 var(--gut) clamp(80px,14vh,150px);
}
.card figure{ margin:0; overflow:hidden; background:var(--paper-deep) }
.card img{ width:100%; transition:transform 1.1s var(--ease) }
.card:hover img{ transform:scale(1.035) }
.card .cap{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin-top:10px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
}
.card .cap .nm{ color:var(--ink) }
.card .cap .pr{ color:var(--ink-soft); font-variant-numeric:tabular-nums }
.card .ed{
  margin-top:4px;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt);
}

/* ============================================================
   Footer
   ============================================================ */

footer.foot{
  border-top:1px solid var(--rule);
  margin:0 var(--gut);
  padding:26px 0 34px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:"Archivo",system-ui,sans-serif;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
footer.foot a:hover{ color:var(--ink) }

/* ============================================================
   The aperture — page transitions
   ============================================================ */

.iris{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  pointer-events:none;
  clip-path: circle(0% at 50% 50%);
}
.iris.closing{
  pointer-events:all;
  animation: irisIn .58s var(--iris) forwards;
}
.iris.opening{
  clip-path: circle(150% at 50% 50%);
  animation: irisOut .72s var(--iris) forwards;
}
@keyframes irisIn { from{ clip-path:circle(0% at 50% 50%) }   to{ clip-path:circle(150% at 50% 50%) } }
@keyframes irisOut{ from{ clip-path:circle(150% at 50% 50%) } to{ clip-path:circle(0% at 50% 50%) } }

/* ---------- cursor ---------- */

.ring{
  position:fixed; top:0; left:0; z-index:190;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--ink); border-radius:50%;
  pointer-events:none; opacity:0;
  display:grid; place-items:center;
  transition:width .3s var(--ease), height .3s var(--ease),
             margin .3s var(--ease), opacity .3s var(--ease),
             background-color .3s var(--ease), border-color .3s var(--ease);
}
.ring b{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); opacity:0; transition:opacity .22s var(--ease);
}
.ring.live{ opacity:1 }
.ring.big{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:var(--ink); border-color:var(--ink);
}
.ring.big b{ opacity:1 }
@media (hover:none), (pointer:coarse){ .ring{ display:none } }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px){
  .index{ grid-template-columns:1fr; padding-top:clamp(80px,12vh,110px) }
  .stage{ display:none }              /* hover previews mean nothing on touch */
  .page{ grid-template-columns:1fr }
  .page h1{ position:static }
  .frame.pair{ grid-template-columns:1fr }
  .row{ grid-template-columns:2.2rem 1fr auto }
}

@media (max-width: 520px){
  body{ font-size:16px }
  .bar{ padding:16px var(--gut) }
  .nav{ gap:13px }
  .nav a{ font-size:10px; letter-spacing:.1em }
  .wordmark{ font-size:10px; letter-spacing:.16em }
}

/* ============================================================
   Reduced motion — a working page, not a degraded one.
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .opener img{ opacity:1; transform:none }
  .plate .line > *{ transform:none }
  .frame{ opacity:1; transform:none }
  .stage img{ clip-path:inset(0 0 0 0); transform:none }
  .iris{ display:none }
  .ring{ display:none }
  .scroll-cue{ animation:none; opacity:.6 }
}