/* ------------------------------------------------------------------
   portfolio — shared shell
   one typeface (Suisse Intl Book), three papers: white / black / sienna
------------------------------------------------------------------ */

@font-face{
  font-family:"Suisse Intl";
  src:url("fonts/SuisseIntl-Book.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --paper:#ffffff;
  --ink:#111111;
  --ink-mid:#6b6b6b;
  --ink-soft:#a0a0a0;
  --rule:#e2e2e2;
  --halo:rgba(17,17,17,.14);
  --font:"Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad:22px;
}
:root[data-paper="black"]{
  --paper:#0a0a0a;
  --ink:#f2f2f2;
  --ink-mid:#a8a8a8;
  --ink-soft:#6a6a6a;
  --rule:#262626;
  --halo:rgba(242,242,242,.13);
}
:root[data-paper="sienna"]{
  --paper:#924d21;
  --ink:#f7ede2;
  --ink-mid:#e7cfb9;
  --ink-soft:#caa284;
  --rule:#a8673c;
  --halo:rgba(247,237,226,.16);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
  transition:background-color .35s ease, color .35s ease;
}

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

::selection{ background:var(--ink); color:var(--paper); }

.lbl{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px;
  color:var(--ink-soft);
  margin-bottom:8px;
}

/* --- paper square, bottom left ---------------------------------- */
#paper-sq{
  position:fixed;
  left:var(--pad); bottom:var(--pad);
  width:12px; height:12px;
  border:1px solid var(--ink);
  background:#ffffff;
  padding:0; margin:0;
  z-index:20;
  cursor:pointer;
  transition:transform .15s ease, background-color .35s ease, border-color .35s ease;
}
#paper-sq[data-next="white"]{ background:#ffffff; }
#paper-sq[data-next="black"]{ background:#0a0a0a; }
#paper-sq[data-next="sienna"]{ background:#924d21; }
#paper-sq:hover{ transform:scale(1.35); }

/* --- cursor ------------------------------------------------------- */
html.has-cursor, html.has-cursor *{ cursor:none !important; }

.cur-dot, .cur-halo{
  position:fixed; left:0; top:0;
  pointer-events:none;
  border-radius:50%;
  z-index:1000;
  opacity:0;
  transition:opacity .25s linear, width .18s ease, height .18s ease, margin .18s ease;
  will-change:transform;
}
.cur-dot{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--ink);
  mix-blend-mode:difference;
}
:root[data-paper="black"] .cur-dot,
:root[data-paper="sienna"] .cur-dot{ mix-blend-mode:normal; }
.cur-halo{
  width:180px; height:180px; margin:-90px 0 0 -90px;
  background:radial-gradient(circle, var(--halo) 0%, rgba(0,0,0,0) 65%);
  z-index:999;
}
html.cursor-on .cur-dot, html.cursor-on .cur-halo{ opacity:1; }
html.cursor-link .cur-dot{ width:16px; height:16px; margin:-8px 0 0 -8px; }
html.cursor-down .cur-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }

/* ==================================================================
   LANDING
================================================================== */

html.landing, body.landing{ overflow:hidden; height:100%; }

#stage{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
}

.hud{
  position:fixed; inset:0;
  padding:var(--pad);
  pointer-events:none;
  display:grid;
  grid-template-rows:auto 1fr auto;
  z-index:2;
}
.hud a, .hud button{ pointer-events:auto; }

.mast{
  display:flex; gap:26px; align-items:baseline;
  text-transform:uppercase; letter-spacing:.08em; font-size:9px;
}
.mast .name{ color:var(--ink); }
.mast .sub{ color:var(--ink-soft); }

.info{
  align-self:center;
  max-width:min(34vw, 400px);
  transition:opacity .18s linear;
}
.info.swap{ opacity:0; }
.info .ttl{ font-size:12px; letter-spacing:.02em; margin-bottom:2px; }
.info .sub{ font-size:11px; color:var(--ink-mid); margin-bottom:26px; }
.info .blk{ margin-bottom:22px; }
.info .body{
  font-size:11px; line-height:1.75; color:var(--ink-mid);
  max-width:38ch;
  word-break:keep-all;
}
.info .row{ font-size:10px; color:var(--ink); letter-spacing:.04em; }

/* counter + hint, kept inside the left column; the paper square sits
   in the corner beneath them */
.foot{
  display:flex; align-items:flex-end; gap:22px;
  max-width:min(46vw, 560px);
  padding-bottom:26px;
}
.count{ display:flex; align-items:baseline; gap:10px; line-height:.84; }
.count .n{
  font-size:clamp(62px, 9vw, 128px);
  line-height:.84;
  letter-spacing:-.03em;
}
.count .of{ font-size:9px; letter-spacing:.08em; color:var(--ink-soft); padding-bottom:.6em; }
.hint{
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:.9em;
  transition:opacity .5s linear;
}
.hint.off{ opacity:.28; }

.enter{
  position:fixed;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  padding:3px 6px;
  border:1px solid var(--ink);
  pointer-events:none;
  opacity:0;
  transition:opacity .12s linear;
  z-index:3;
  white-space:nowrap;
}
.enter.on{ opacity:1; }

/* ==================================================================
   PROJECT / LAYOUT
================================================================== */

body.layout{ padding:var(--pad) var(--pad) 56px; }

.pinfo{
  position:fixed;
  top:var(--pad); left:var(--pad);
  z-index:5;
}
.pinfo div{ font-size:11px; line-height:1.45; }
.pinfo .m{ color:var(--ink-mid); }
.pinfo .back{
  display:inline-block;
  margin-top:10px;
  text-transform:uppercase; letter-spacing:.08em; font-size:9px;
  color:var(--ink-soft);
}
.pinfo .back:hover{ color:var(--ink); }

.lead{
  padding-top:132px;
  max-width:46ch;
  font-size:11px; line-height:1.8; color:var(--ink-mid);
  word-break:keep-all;
}

/* --- sections: approach / identity / final ---------------------- */
.feed{ padding-top:40px; }

.sec{ padding-top:56px; }
.sec-h{
  display:flex; align-items:baseline; gap:14px;
  border-top:1px solid var(--rule);
  padding-top:10px;
  margin-bottom:14px;
}
.sec-h .k{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.sec-h .t{ font-size:11px; letter-spacing:.02em; }
.sec-t{
  max-width:46ch;
  font-size:11px; line-height:1.8; color:var(--ink-mid);
  margin:0 0 44px;
  word-break:keep-all;
}

.feed figure{ margin:0 0 62px 0; }
.feed img{
  display:block;
  width:100%; height:auto;
  background:var(--rule);
  opacity:0;
  transition:opacity .45s ease;
}
.feed img.in{ opacity:1; }
.feed figcaption{
  margin-top:7px;
  font-size:9px; letter-spacing:.06em;
  color:var(--ink-soft);
}

.pfoot{
  padding:40px 0 8px;
  display:flex; justify-content:space-between; gap:24px;
  border-top:1px solid var(--rule);
  font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pfoot a:hover{ color:var(--ink); }

@media (max-width: 860px){
  :root{ --pad:14px; }

  .hud{ padding:0; grid-template-rows:auto 1fr auto; }
  .mast{
    background:var(--paper);
    padding:13px var(--pad);
    border-bottom:1px solid var(--rule);
    gap:16px;
  }
  .info{
    align-self:end;
    max-width:none;
    background:var(--paper);
    padding:12px var(--pad) 0;
    border-top:1px solid var(--rule);
  }
  .info .blk{ display:none; }
  .info .sub{ margin-bottom:0; }
  .foot{
    max-width:none;
    background:var(--paper);
    padding:2px var(--pad) 10px 34px;
    align-items:baseline;
    gap:16px;
  }
  .count .n{ font-size:54px; line-height:1; }

  #paper-sq{ bottom:16px; left:var(--pad); }
  .lead{ padding-top:144px; }
  body.layout{ padding-bottom:48px; }
}