/* SCIA: a photo-zine on the web. Helvetica, ink, paper, and real photographs. */
:root{--bg:#f5f3ec;--fg:#20201c;--muted:#66665f;--line:#b6b5aa;--panel:#e7e5dc;--accent:#b52b20;--ink-red:#b52b20}body[data-theme=night]{--bg:#191a17;--fg:#eeeae0;--muted:#aaa99f;--line:#52534b;--panel:#272923;--accent:#f27864;--ink-red:#f27864}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}aside{width:192px;padding:30px 24px;border-right:1px solid var(--fg)}.logo{font-size:60px;letter-spacing:-5px;font-weight:800}.logo span{font-size:8px;letter-spacing:2.6px;margin-top:12px}nav{margin-top:68px;gap:0;border-top:1px solid var(--fg)}nav a{font-size:17px;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);letter-spacing:-.4px}nav i{color:var(--ink-red);font-size:10px;font-weight:700}nav sup{font-size:9px}nav a.active{color:var(--ink-red)}nav a:hover{text-decoration:underline;text-underline-offset:3px}.sidebottom p{font-size:9px;letter-spacing:.4px;line-height:1.6}.sidebottom small{font-size:8px;letter-spacing:.3px}main{margin-left:192px;padding:0 34px;max-width:1360px}header{padding:21px 0 15px;border-bottom:3px solid var(--fg);font-size:10px;letter-spacing:.4px;color:var(--fg)}header a{text-decoration:underline;text-underline-offset:3px}section{padding:42px 0;border-bottom:1px solid var(--fg)}.hero{padding-top:15px}.hero-top{font-size:9px;letter-spacing:.5px}.zine-masthead{display:flex;justify-content:space-between;align-items:center;padding:12px 0 17px}.hero h1{margin:0 0 0 -5px;font-size:clamp(110px,15.5vw,216px);line-height:.85;font-weight:800;letter-spacing:-.095em}.masthead-dot{color:var(--ink-red)}.masthead-index{display:flex;align-items:end;gap:45px;padding-top:10px}.masthead-index p{margin:0;font-size:20px;letter-spacing:-.7px;line-height:1}.masthead-index a{font-size:10px;max-width:86px;text-decoration:underline;line-height:1.5;text-underline-offset:3px}.forest-scene{border:7px solid var(--fg);background:var(--fg)}.hero-frame.real-photo{height:390px}.hero-frame.real-photo:after{background:linear-gradient(180deg,#0003,transparent 25%,transparent 75%,#0005)}.frame-label,.frame-note{font-size:9px;letter-spacing:.4px;left:14px;top:14px}.frame-note{top:auto;bottom:14px}.frame-arrow{right:13px;bottom:9px;font-size:24px}.hero-caption{padding-top:10px;font-size:10px;line-height:1.5}.hero-caption a{font-size:9px;letter-spacing:.2px;text-decoration:underline}.sectionhead{font-size:9px;letter-spacing:.5px;margin-bottom:24px;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}.sectionhead>span:first-child{color:var(--ink-red);font-weight:600}h2{font-size:clamp(32px,4.5vw,54px);line-height:1;letter-spacing:-2px;font-weight:600;margin:0 0 25px}h1 em{font-style:normal}.story-grid{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:50px}.eslynn-interview dt{font-size:12px}.eslynn-interview dd{font-size:13px;line-height:1.65}.eslynn-interview>.tiny{font-size:9px;letter-spacing:.3px}.daughter.real-portrait{padding:8px;border:1px solid var(--line)}#story .real-portrait img{max-height:540px}#story .real-portrait figcaption{font-size:10px;padding:10px 0 2px}.titleline{align-items:center}.arrows button{font-size:18px;border:1px solid var(--line);padding:5px 11px;line-height:1.3}.film{flex-basis:46%}.filmvisual{height:260px;border:1px solid var(--line);background:var(--panel);color:var(--fg)}.filmvisual b{font-size:65px;font-weight:800;letter-spacing:-5px}.filmvisual.ymca,.filmvisual.stn,.filmvisual.reel{background:var(--panel);color:var(--fg)}.filmvisual:after{display:none}.filmvisual small{font-size:8px;letter-spacing:.5px}.filmvisual .play{color:var(--ink-red)}.caption h3{font-size:14px}.caption>span{font-size:8px;letter-spacing:.3px}.archive-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px}.archive-heading h2{margin-bottom:9px}.archive-instructions{margin:0 0 35px;font-size:11px;color:var(--muted)}.sheet-controls{display:flex;gap:8px;align-items:center;font-size:10px;white-space:nowrap}.sheet-controls button{padding:4px 0;text-decoration:underline;text-underline-offset:3px}.sheet-controls button[aria-pressed=true]{color:var(--ink-red);font-weight:700}.album{margin:0 0 38px;padding:0 0 20px;border-bottom:1px dotted var(--line)}.album-top{margin-bottom:13px}.album-top h3{font-size:16px;font-weight:600;letter-spacing:-.5px}.photo-album{gap:14px}.photo-slide>img{height:390px;cursor:zoom-in}.photo-slide>img:focus-visible{outline:2px solid var(--ink-red);outline-offset:3px}.photo-slide>figcaption{font-size:9px;padding-top:7px;letter-spacing:.2px}.photo-slide>figcaption span:last-child{color:var(--muted)}.hint{font-size:9px;letter-spacing:.3px;line-height:1.6}.sheet-hint{display:none}body[data-photo-view=sheet] .photo-album{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 12px;overflow:visible;scroll-snap-type:none}body[data-photo-view=sheet] .photo-slide>img{height:120px;background:var(--fg);object-fit:contain;padding:4px;border:1px solid var(--fg)}body[data-photo-view=sheet] .photo-slide>figcaption span:last-child{display:none}body[data-photo-view=sheet] .album .arrows{display:none}body[data-photo-view=sheet] .strip-hint{display:none}body[data-photo-view=sheet] .sheet-hint{display:inline}.more-albums-control{border-top:0;padding:0;margin-top:0}#more-albums{font-size:18px;border:1px solid var(--line);padding:14px}.more-albums-control p{font-size:9px;letter-spacing:.3px}.art-grid{gap:40px}.art-grid p{font-size:13px;line-height:1.7}.support button{border-bottom:1px solid var(--line);font-size:18px}.tier-cards{gap:0;border:1px solid var(--line)}.tier-card{border:0;border-right:1px solid var(--line);background:transparent!important;padding:18px 12px!important;min-height:160px!important}.tier-card:last-child{border-right:0}.tier-card strong{font-size:23px!important}.tier-card>span,.tier-card small{font-size:9px!important;letter-spacing:0!important}.tier-card[aria-pressed=true]{box-shadow:inset 0 3px var(--ink-red);color:var(--ink-red)}.tier-preview-note{font-size:11px}.membership-preview{margin-top:45px}.tier-detail h3{font-size:23px}footer{padding:25px 0}.design-lab-link{font-size:9px;letter-spacing:.2px}footer div{font-size:9px;letter-spacing:.4px}#photo-reader{width:min(1150px,95vw);max-width:95vw;max-height:95vh;border:1px solid var(--fg);background:var(--bg);color:var(--fg);padding:15px;overflow:auto}#photo-reader::backdrop{background:#090a08e6}.reader-bar{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}.reader-bar button{font-size:11px;text-decoration:underline}#reader-image{display:block;width:100%;height:70vh;object-fit:contain;margin:12px 0;background:#111}.reader-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}.reader-bottom p{font-size:10px;max-width:60%;text-align:center}.reader-bottom button{font-size:11px;white-space:nowrap;text-decoration:underline}.album-lock-panel{min-height:220px}.album-lock-panel h4{font-size:25px}button:hover,a:hover{opacity:.8}@media(min-width:1600px){main{max-width:1450px}}@media(max-width:1000px){aside{width:164px;padding:25px 20px}main{margin-left:164px;padding:0 24px}.hero h1{font-size:145px}.masthead-index{gap:20px}.masthead-index p{font-size:17px}.hero-frame.real-photo{height:340px}body[data-photo-view=sheet] .photo-album{grid-template-columns:repeat(4,minmax(0,1fr))}.story-grid{gap:28px}}@media(max-width:650px){aside{width:100%;height:auto;position:relative;display:grid;grid-template-columns:1fr auto;padding:19px 18px 0;border-right:0;border-bottom:1px solid var(--fg)}.logo{font-size:44px;letter-spacing:-3px}.logo span{font-size:7px;letter-spacing:2px;margin-top:6px}nav{grid-column:1/-1;grid-row:2;display:flex;margin:17px 0 0;border-top:1px solid var(--line);gap:0;justify-content:space-between}nav a{font-size:13px;border:0;padding:13px 0;gap:5px}nav sup{display:none}nav i{font-size:8px;width:auto}.sidebottom{display:block;margin:0;text-align:right;grid-column:2;grid-row:1}.sidebottom p{display:none}#theme{justify-content:end;margin-left:auto}.sidebottom small{display:none}main{margin:0;padding:0 18px}header{font-size:8px;letter-spacing:.1px;padding-top:16px}header a{display:block;font-size:8px}.hero-top{font-size:8px}.hero h1{font-size:110px;margin-left:-3px}.zine-masthead{padding:16px 0}.masthead-index{gap:12px;padding:0}.masthead-index p{font-size:13px}.masthead-index a{display:none}.forest-scene{border-width:4px}.hero-frame.real-photo{height:270px}.hero-caption{font-size:9px;gap:20px}.hero-caption a{font-size:8px;max-width:110px}section{padding:32px 0}.sectionhead{font-size:8px;letter-spacing:0}.sectionhead>span:last-child{max-width:57%;text-align:right}h2{font-size:36px;letter-spacing:-1.5px}.story-grid{grid-template-columns:1fr;gap:25px}.daughter.real-portrait{max-width:330px}.film{flex-basis:87%}.filmvisual{height:250px}.archive-heading{display:block}.sheet-controls{margin:12px 0}.archive-instructions{margin-bottom:28px}body[data-photo-view=sheet] .photo-album{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 9px}body[data-photo-view=sheet] .photo-slide>img{height:90px;padding:2px}.photo-slide>figcaption{font-size:9px}.album-top h3{font-size:17px}.hint{font-size:10px}.photo-slide>img{height:300px}.tier-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.tier-card{border-bottom:1px solid var(--line)}.tier-card strong{font-size:23px!important}.art-grid{grid-template-columns:1fr}.reader-bottom{gap:8px}.reader-bottom button{font-size:10px}#reader-image{height:60vh}.reader-bottom p{font-size:9px}.reader-bar{font-size:9px}footer div{gap:12px;font-size:8px}}

/* Staggered columns follow the album order from top to bottom. */
.photo-album {
  gap: 4px;
}
body[data-photo-view=sheet] .photo-album {
  display: block;
  columns: 170px 5;
  column-gap: 4px;
}
body[data-photo-view=sheet] .photo-slide {
  break-inside: avoid;
  margin: 0 0 4px;
}
body[data-photo-view=sheet] .photo-slide > img {
  height: auto;
  padding: 0;
  border: 0;
}
@media (max-width: 650px) {
  body[data-photo-view=sheet] .photo-album {
    columns: 2;
  }
}

/* The supplied wordmark sets the type weight and monochrome palette. */
:root {
  --bg: #fff;
  --fg: #111;
  --muted: #595959;
  --line: #d4d4d4;
  --panel: #f4f4f4;
  --accent: #111;
  --ink-red: #111;
}
body[data-theme=night] {
  --bg: #111;
  --fg: #fff;
  --muted: #bcbcbc;
  --line: #484848;
  --panel: #202020;
  --accent: #fff;
  --ink-red: #fff;
}
.logo .wordmark, .hero .wordmark {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1504 / 610;
  margin: 0;
  overflow: hidden;
}
.wordmark img {
  position: absolute;
  width: 139.63%;
  max-width: none;
  height: auto;
  left: -20.81%;
  top: -121%;
  filter: contrast(1.1);
}
body[data-theme=night] .wordmark img {
  filter: contrast(1.1) invert(1);
}
body[data-theme=night] .wordmark {
  mix-blend-mode: screen;
}
.logo {
  display: block;
  width: 124px;
}
.hero h1 {
  width: min(65%, 460px);
  margin: 0;
}
.zine-masthead {
  padding: clamp(26px, 5vw, 66px) 0;
}
header, aside, section {
  border-color: var(--line);
  border-width: 1px;
}
h2, .album-top h3, .masthead-index p {
  font-weight: 400;
  letter-spacing: -.025em;
}
.forest-scene {
  border: 0;
}
@media (max-width: 650px) {
  .logo {
    width: 110px;
    align-self: center;
  }
  .hero h1 {
    width: 68%;
  }
}

.logo .wordmark-horizontal {
  aspect-ratio: 1736 / 230;
}
.wordmark-horizontal img {
  width: 120.97%;
  left: -10.54%;
  top: -406.52%;
}

/* Show the full square artwork, including its original margins. */
.hero .wordmark {
  aspect-ratio: 1;
}
.hero .wordmark img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty-album {
  padding: 24px 0;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}