/* ==========================================================================
   Where the Light Lands: page styles
   Every rule is scoped under .wtll (the page's root element), so nothing here
   touches the surrounding portfolio. Values match the published original
   exactly. Only the selectors were prefixed.
   Single-world design: the page itself runs the light from afternoon silver
   to night. It is intentionally not light/dark theme-aware.
   ========================================================================== */

.wtll{
  color-scheme: light;
  --silver:#D8DBD9; --silver-ink:#1D2326; --silver-mute:#4F585C;
  --gold:#E4CD9E;   --gold-ink:#2A2013;   --gold-mute:#5E4C31;
  --amber:#D48636;  --amber-ink:#1B1007;  --amber-mute:#472811;
  --night:#0D1116;  --night-ink:#EDE4D1;  --night-mute:#9AA0A3; --moon:#F1D7A3;
  --display:"Italiana","Didot","Bodoni 72",Georgia,serif;
  --body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,5vw,64px);

  /* Originally set on <body> */
  background:var(--silver);color:var(--silver-ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;
}
/* Guards against common portfolio resets (e.g. `*{box-sizing:border-box}`),
   so the original box model is kept inside this page. */
.wtll,.wtll *,.wtll *::before,.wtll *::after{box-sizing:content-box}
.wtll [hidden]{display:none!important}

.wtll img{max-width:100%;display:block}
.wtll .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}

.wtll section{--bg:var(--silver);--ink:var(--silver-ink);--mute:var(--silver-mute);background:var(--bg);color:var(--ink)}
.wtll .s-gold{--bg:var(--gold);--ink:var(--gold-ink);--mute:var(--gold-mute)}
.wtll .s-amber{--bg:var(--amber);--ink:var(--amber-ink);--mute:var(--amber-mute)}
.wtll .s-night{--bg:var(--night);--ink:var(--night-ink);--mute:var(--night-mute)}
.wtll .dusk{height:clamp(56px,10vw,120px)}
.wtll .d1{background:linear-gradient(var(--silver),var(--gold))}
.wtll .d2{background:linear-gradient(var(--gold),var(--amber))}
.wtll .d3{background:linear-gradient(var(--amber),#3a2417 45%,var(--night))}

/* Hero */
.wtll .hero{padding-block:clamp(56px,10vw,120px) 40px}
.wtll .eyebrow{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.wtll h1{font:400 clamp(52px,11vw,148px)/.92 var(--display);letter-spacing:-.01em;margin:.25em 0 .2em;text-wrap:balance}
.wtll h1 span{display:block;padding-left:.9em}
.wtll .dek{font:italic 400 clamp(19px,2.2vw,24px)/1.4 var(--body);max-width:30ch;margin:0;color:var(--ink)}
.wtll .intro{max-width:62ch;color:var(--mute);margin:28px 0 0}

/* Day strip: real clock positions, 16:00–23:00 */
.wtll .day{margin-top:clamp(40px,7vw,72px)}
.wtll .axis{position:relative;height:120px;margin-inline:4px}
.wtll .axis::before{content:"";position:absolute;left:0;right:0;top:60px;height:1px;
  background:linear-gradient(90deg,var(--silver-mute),#9c7a3e 35%,#b8641d 55%,var(--night) 100%)}
.wtll .hr{position:absolute;top:56px;width:1px;height:9px;background:var(--silver-mute);opacity:.6}
.wtll .hr b{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:300 10px var(--mono);color:var(--silver-mute);font-variant-numeric:tabular-nums}
.wtll .mark{position:absolute;top:60px;transform:translate(-50%,-50%);display:block;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--silver-ink);background:var(--c);text-decoration:none;color:var(--silver-ink)}
.wtll .mark:focus-visible,.wtll .mark:hover{outline:2px solid var(--silver-ink);outline-offset:3px}
.wtll .mark span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 11px/1.3 var(--mono);font-variant-numeric:tabular-nums;text-align:center}
.wtll .mark.up span{bottom:22px}.wtll .mark.down span{top:34px}
.wtll .mark span i{display:block;font:italic 400 12px var(--body);color:var(--silver-mute)}

/* Frames */
.wtll .frame{padding-block:clamp(48px,8vw,96px)}
.wtll .frame .grid{display:grid;gap:clamp(24px,4vw,56px);align-items:end}
.wtll .frame.portrait .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.wtll .frame.portrait.flip .grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.wtll .frame.portrait.flip .photo{order:2}
.wtll .frame.land .grid{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
.wtll .photo{margin:0;cursor:zoom-in;background:none;border:0;padding:0}
.wtll .photo img{width:100%;height:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.wtll .photo:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.wtll .time{font:400 clamp(64px,9vw,112px)/.9 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0}
.wtll h2{font:500 20px/1.3 var(--body);margin:14px 0 4px;text-wrap:balance}
.wtll .date{font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.wtll .cap{margin:0;max-width:40ch}
.wtll .exif{margin:22px 0 0;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font:300 11px/1.6 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.wtll .exif dt{text-transform:uppercase;letter-spacing:.1em}
.wtll .exif dd{margin:0;color:var(--ink)}
.wtll .s-night .time{color:var(--moon)}

/* Approach */
.wtll .approach{padding-block:clamp(56px,9vw,110px)}
.wtll .approach h3{font:400 clamp(36px,5vw,56px)/1 var(--display);margin:0 0 24px}
.wtll .approach .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.wtll .approach p{max-width:60ch;margin:0 0 1em;color:var(--mute)}
.wtll .approach p strong{color:var(--ink);font-weight:500}
.wtll .ladder{list-style:none;margin:0;padding:0;font:300 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.wtll .ladder li{display:grid;grid-template-columns:48px 1fr 88px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #232a31}
.wtll .ladder .bar{height:6px;background:linear-gradient(90deg,var(--moon),transparent);width:var(--w)}
.wtll .ladder em{font-style:normal;color:var(--night-ink);text-align:right}
.wtll .ladder small{display:block;margin-top:12px;color:var(--night-mute);font-size:11px;line-height:1.6}
.wtll footer{padding-block:40px 56px;border-top:1px solid #232a31;font:300 11px/1.6 var(--mono);letter-spacing:.08em;color:var(--night-mute);text-transform:uppercase}

/* Lightbox */
.wtll .lb[hidden]{display:none}
.wtll .lb{position:fixed;inset:0;background:rgba(8,10,13,.94);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;cursor:zoom-out}
.wtll .lb img{max-height:calc(100vh - 48px);width:auto;max-width:100%}
.wtll .lb button{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;background:none;border:1px solid #555;color:#eee;font:400 11px var(--mono);letter-spacing:.1em;padding:8px 12px;cursor:pointer}

@media (max-width:760px){
  .wtll .frame.portrait .grid,.wtll .frame.portrait.flip .grid,.wtll .frame.land .grid{grid-template-columns:1fr}
  .wtll .frame.portrait.flip .photo{order:0}
  .wtll h1 span{padding-left:.4em}
}
@media (prefers-reduced-motion:no-preference){
  .wtll .photo img{transition:transform .6s ease}
  .wtll .photo:hover img{transform:scale(1.008)}
}

/* Stagger nearby timeline labels on narrow screens. */
@media(max-width:480px){.wtll .mark[href="#wtll-f1"] span{bottom:52px}}