/* Oakhaven Island — logbook site
   Shared by /log/, /log/<entry>/ and /residents/. Front page keeps its own CSS. */

:root{
  --paper:#c2a077;
  --ink:#3a2317;
  --ink-70:rgba(58,35,23,.70);
  --ink-55:rgba(58,35,23,.55);
  --ink-45:rgba(58,35,23,.45);
  --ink-22:rgba(58,35,23,.22);
  --stamp:#8a5a2a;
  --mono:"VT323",ui-monospace,"Courier New",monospace;
  --type:"Special Elite","Courier New",Courier,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--type); -webkit-font-smoothing:antialiased;
}

.paper{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 12%, #d4b78f 0%, transparent 58%),
    radial-gradient(110% 80% at 84% 92%, rgba(120,92,58,.30) 0%, transparent 62%),
    linear-gradient(168deg, #d3b58d 0%, #c8a87f 48%, #b5926a 100%);
}
.paper::before{
  content:""; position:absolute; inset:-2%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23f)' opacity='0.55'/></svg>");
  opacity:.22; mix-blend-mode:multiply;
}
.vhs{position:fixed; inset:0; z-index:40; pointer-events:none}
.scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(28,16,8,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(114% 98% at 50% 40%, transparent 54%, rgba(45,27,13,.24) 100%);
}

/* ---------- chrome ---------- */
.topbar{
  position:relative; z-index:20;
  display:flex; flex-wrap:wrap; gap:14px 26px;
  align-items:baseline; justify-content:space-between;
  max-width:900px; margin:0 auto;
  padding:clamp(22px,4vw,34px) clamp(20px,5vw,44px);
  border-bottom:1px solid var(--ink-22);
}
.topbar .brand{
  font-family:var(--mono); font-size:clamp(1.05rem,2.8vw,1.2rem);
  letter-spacing:.26em; color:var(--ink-70); text-decoration:none;
}
.topbar .brand:hover,.topbar a:focus-visible{color:var(--ink); outline:none}
.topbar nav{display:flex; gap:clamp(16px,3vw,28px)}
.topbar nav a{
  font-family:var(--mono); font-size:clamp(1rem,2.6vw,1.12rem);
  letter-spacing:.16em; color:var(--ink-45); text-decoration:none;
}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.on{color:var(--ink); border-bottom:1px solid var(--ink-45)}

.wrap{
  position:relative; z-index:10;
  max-width:900px; margin:0 auto;
  padding:clamp(44px,7vw,76px) clamp(20px,5vw,44px) clamp(40px,7vh,72px);
}

/* ---------- mastheads ---------- */
.masthead{margin-bottom:clamp(40px,7vh,68px)}
.masthead h1{
  margin:0; font-weight:400;
  font-size:clamp(1.7rem,6vw,2.5rem); line-height:1.2;
  text-shadow:1.2px 0 0 rgba(186,44,44,.15), -1.2px 0 0 rgba(28,108,190,.13);
}
.masthead .season{
  margin:.5em 0 0; font-family:var(--mono);
  font-size:clamp(1rem,2.6vw,1.15rem);
  letter-spacing:.4em; color:var(--ink-45);
}
.masthead .lede{
  margin:clamp(20px,3.4vh,30px) 0 0; max-width:52ch;
  font-size:clamp(.9rem,2.4vw,1rem); line-height:1.95; color:var(--ink-55);
}

/* ---------- index rows ---------- */
.rows{list-style:none; margin:0; padding:0}
.row{border-top:1px solid var(--ink-22)}
.row:last-child{border-bottom:1px solid var(--ink-22)}
.rowlink{
  display:flex; gap:clamp(16px,3vw,26px); align-items:flex-start;
  padding:clamp(20px,3.4vh,30px) 0;
  text-decoration:none; color:inherit;
}
.rowlink:hover .excerpt,.rowlink:focus-visible .excerpt{color:var(--ink)}
.rowlink:focus-visible{outline:1px solid var(--ink-45); outline-offset:6px}
.thumb{
  flex:0 0 auto; width:clamp(64px,11vw,84px); height:auto;
  aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.82) contrast(.96);
  border:1px solid var(--ink-22);
}
.rowtext{display:block; min-width:0}
.rowtop{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline}
.stamp{font-family:var(--mono); font-size:1.12rem; letter-spacing:.18em; color:var(--stamp)}
.ep{font-family:var(--mono); font-size:1rem; letter-spacing:.12em; color:var(--ink-45)}
.who{display:block; margin:.45em 0 .3em; font-size:1.02rem}
.excerpt{
  display:block; max-width:56ch;
  font-size:clamp(.86rem,2.3vw,.94rem); line-height:1.8;
  color:var(--ink-55); transition:color .2s ease;
}

/* ---------- a single page ---------- */
.byline{
  display:flex; gap:clamp(16px,3vw,24px); align-items:center;
  padding-bottom:clamp(22px,3.6vh,32px);
  border-bottom:1px solid var(--ink-22);
  margin-bottom:clamp(30px,5vh,46px);
}
.face{
  flex:0 0 auto; width:clamp(76px,13vw,104px); height:auto;
  aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.82) contrast(.96);
  border:1px solid var(--ink-22);
}
.bylinetext{display:flex; flex-direction:column; gap:.35em}
.bylinetext .who{
  margin:0; font-size:clamp(1.15rem,3.4vw,1.4rem);
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--ink-22); align-self:flex-start;
}
.bylinetext .who:hover{border-bottom-color:var(--ink)}
.wholine{font-size:.9rem; color:var(--ink-45)}

.dayhead{
  margin:0 0 1.5em !important;
  font-family:var(--mono); font-size:1.2rem;
  letter-spacing:.16em; color:var(--ink-45);
}
.page p{
  margin:0 0 1.35em;
  font-size:clamp(.95rem,2.5vw,1.04rem); line-height:2.0;
}
.page p:last-child{margin-bottom:0}

/* Three people, three measures. Nobody is told which is which. */
.hand-erik .page{max-width:36ch}
.hand-tess .page{max-width:46ch}
.hand-mara .page{max-width:58ch}

.epline{
  margin:clamp(34px,5.5vh,52px) 0 0;
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--ink-22);
  font-size:.88rem; color:var(--ink-45);
}
.epline span{color:var(--ink-70)}

/* ---------- pager ---------- */
.pager{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:clamp(44px,7vh,72px);
  padding-top:clamp(22px,3.4vh,30px);
  border-top:1px solid var(--ink-22);
}
.pager a{color:var(--ink-70); text-decoration:none; font-size:.96rem}
.pager a:hover{color:var(--ink)}
.pager a span{
  display:block; font-family:var(--mono); font-size:.98rem;
  letter-spacing:.16em; color:var(--ink-45);
}
.pager .next{text-align:right}
.pager .all{font-family:var(--mono); letter-spacing:.14em; color:var(--ink-45)}

/* ---------- residents ---------- */
.residents{display:flex; flex-direction:column; gap:clamp(34px,5.5vh,54px)}
.resident{
  display:flex; gap:clamp(20px,4vw,34px); align-items:flex-start;
  padding-top:clamp(30px,5vh,44px); border-top:1px solid var(--ink-22);
}
.resident:first-child{border-top:0; padding-top:0}
.resident img{
  flex:0 0 auto; width:clamp(110px,20vw,168px); height:auto;
  aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.82) contrast(.96);
  border:1px solid var(--ink-22);
}
.residenttext{min-width:0}
.residenttext h2{
  margin:0; font-weight:400; font-size:clamp(1.3rem,4vw,1.7rem);
}
.residenttext .one{
  margin:.35em 0 1em; font-family:var(--mono);
  font-size:1.05rem; letter-spacing:.12em; color:var(--ink-45);
}
.residenttext p{
  margin:0 0 1em; max-width:50ch;
  font-size:clamp(.9rem,2.4vw,.98rem); line-height:1.95; color:var(--ink-70);
}
.theirs{margin-bottom:0 !important; color:var(--ink-55) !important}
.theirs span{
  display:block; margin-bottom:.4em;
  font-family:var(--mono); font-size:1rem;
  letter-spacing:.2em; color:var(--ink-45);
}
.theirs a{color:var(--ink-70)}

/* ---------- foot ---------- */
.sitefoot{
  position:relative; z-index:10;
  max-width:900px; margin:0 auto;
  padding:clamp(30px,5vh,46px) clamp(20px,5vw,44px) clamp(70px,10vh,110px);
  border-top:1px solid var(--ink-22);
  text-align:center;
}
.sitefoot p{margin:0; font-size:.86rem; line-height:1.9; color:var(--ink-45)}
.sitefoot a{color:var(--ink-70)}
.sitefoot .est{
  margin-top:1.6em; font-family:var(--mono);
  font-size:1.05rem; letter-spacing:.42em; color:var(--ink-45);
}

@media (max-width:560px){
  .resident{flex-direction:column}
  .byline{gap:16px}
}