/* ---------------------------------------------------
   Form in the Fog — tokens
   Tonal teal palette, dark to light. Everything —
   backgrounds, photo duotones, dither field — draws
   from this single hue.
--------------------------------------------------- */
:root{
  --t900: #070f12;
  --t800: #0d1a1e;
  --t700: #14282d;
  --t600: #1d3c42;
  --t500: #2c565d;
  --t400: #497b80;
  --t300: #7ba7a8;
  --t200: #b6d2cd;
  --t100: #eaf0e8;

  --ink:        var(--t900);
  --ink-2:      var(--t800);
  --paper:      var(--t100);
  --fog:        var(--t400);
  --fog-dim:    var(--t600);
  --accent:     var(--t300);
  --line:       var(--t700);
  --line-soft:  rgba(234,240,232,0.14);

  --edge: 16px;
  --edge-lg: 26px;

  --blackletter: "UnifrakturCook", serif;
  --serif: "Fraunces", Georgia, serif;
  --script: "Dancing Script", cursive;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sans: "Inter", -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html{
  background: var(--ink);
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body{
  margin: 0;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible{ outline: 1px solid var(--accent); outline-offset: 3px; }

.mono{ font-family: var(--mono); }

/* dithered cloud field — fixed, sits behind everything */
#dither-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* hairline frame, contact-sheet mount */
.frame{
  position: fixed;
  inset: var(--edge);
  border: 1px solid var(--line-soft);
  pointer-events: none;
  z-index: 5;
}
@media (min-width: 900px){ .frame{ inset: var(--edge-lg); } }

/* ---------------------------------------------------
   Tag header — index / based / contact / follow / clock
   Tightened to match the reference spacing.
--------------------------------------------------- */
.tagbar{
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(var(--edge) + 10px) calc(var(--edge) + 10px) 0;
}
@media (min-width: 900px){
  .tagbar{ padding: calc(var(--edge-lg) + 10px) calc(var(--edge-lg) + 10px) 0; }
}
@media (max-width: 640px){
  .tagbar{ justify-content: flex-start; gap: 22px 36px; }
}

.tag-group{ min-width: 118px; }

.chip{
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 6px;
  background: rgba(7,15,18,0.5);
  backdrop-filter: blur(2px);
}

.tag-line{
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--paper);
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.tag-line.dim{ color: var(--fog); }
.tag-line a:hover{ color: var(--accent); }

.clock{
  font-size: 12.5px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ---------------------------------------------------
   Hero
--------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px var(--edge) 20px;
  overflow: hidden;
}

.title{
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--blackletter);
  font-weight: 700;
  font-size: clamp(58px, 12vw, 156px);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}

.dek{
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 38px);
  color: var(--t300);
}


/* ---------------------------------------------------
   Reveal — 8 postcards, each its own full screen,
   scroll-snapped, framed like a matted print with the
   dithered canvas showing through the surrounding mat
--------------------------------------------------- */
html{ scroll-snap-type: y proximity; }
.hero{ scroll-snap-align: start; }

.reveal{ padding: 0; }

.postcard-stack{
  display: flex;
  flex-direction: column;
}

.frame-item{
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 72px);
  scroll-snap-align: start;
}

.postcard-frame{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--t500);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.frame-item.settled .postcard-frame{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.postcard-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08);
  transition: filter .6s ease;
}
.postcard-frame:hover img{
  filter: grayscale(0) contrast(1.02);
}

/* tonal teal duotone, cycling through the palette — fades out on hover
   to reveal the photo's actual color as shot */
.postcard-frame::after{
  content: "";
  position: absolute; inset: 0;
  background: var(--dc, var(--t500));
  mix-blend-mode: color;
  opacity: .78;
  transition: opacity .6s ease;
  pointer-events: none;
}
.postcard-frame:hover::after{ opacity: 0; }

.frame-item:nth-child(8n+1) .postcard-frame{ --dc: var(--t700); }
.frame-item:nth-child(8n+2) .postcard-frame{ --dc: var(--t500); }
.frame-item:nth-child(8n+3) .postcard-frame{ --dc: var(--t400); }
.frame-item:nth-child(8n+4) .postcard-frame{ --dc: var(--t600); }
.frame-item:nth-child(8n+5) .postcard-frame{ --dc: var(--t800); }
.frame-item:nth-child(8n+6) .postcard-frame{ --dc: var(--t500); }
.frame-item:nth-child(8n+7) .postcard-frame{ --dc: var(--t400); }
.frame-item:nth-child(8n+8) .postcard-frame{ --dc: var(--t600); }

/* postcard numeral, bottom-left — set in the blackletter face */
.frame-num{
  position: absolute;
  left: 22px; bottom: 16px;
  z-index: 2;
  font-family: var(--blackletter);
  font-weight: 700;
  font-size: 54px;
  color: var(--paper);
  opacity: .95;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

@media (max-width: 900px){
  .frame-item{ padding: clamp(16px, 5vw, 36px); }
  .postcard-frame{ aspect-ratio: 4 / 5; max-width: 640px; }
  .frame-num{ font-size: 42px; left: 16px; bottom: 12px; }
}
@media (max-width: 480px){
  .frame-item{ padding: 14px; }
  .postcard-frame{ aspect-ratio: 3 / 4; border-width: 1px; }
  .frame-num{ font-size: 34px; }
}

/* ---------------------------------------------------
   About / info
--------------------------------------------------- */
.about{ padding: 20px var(--edge) 60px; border-top: 1px solid var(--line); }
@media (min-width: 900px){ .about{ padding: 20px var(--edge-lg) 80px; } }

.about-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 46px auto 0;
}
@media (min-width: 640px){
  .about-grid{ grid-template-columns: 1fr 2fr; gap: 60px; }
}

.about-col .chip{ margin-bottom: 16px; }
.about-body{
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.about-body.dim{ color: var(--fog); }
.about-lede{
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--paper);
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.about-body a:hover{ color: var(--accent); }

/* ---------------------------------------------------
   Bottom bar
--------------------------------------------------- */
.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--edge) calc(var(--edge) + 16px);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fog-dim);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px){
  .bottom-bar{ padding: 24px var(--edge-lg) calc(var(--edge-lg) + 16px); }
}
.bottom-bar a{ color: var(--fog); }
.bottom-bar a:hover{ color: var(--paper); border-bottom-color: transparent; }

/* ---------------------------------------------------
   Reduced motion
--------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .frame-item{ transition: opacity .4s ease; transform: none !important; }
  .frame-item img{ transition: none; }
}