/*
  honeymoon-seat/ — own design system, keyed to the printed artefact it's
  about: a warm newsprint-ish paper ground, black text, and the orange of
  the `a day` masthead block as the single accent (same convention as the
  Cycling memoir and childhood-photos each having their own theme).
*/
:root{
  --paper:#F7F5F0; --panel:#EDEAE3; --ink:#16150F; --ink-2:#5E5A50;
  --rule:#B6B1A6; --rule-soft:#D9D5CC;
  --accent:#F0871F;          /* the a day masthead orange */
  --accent-deep:#C4650C;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --thai:"Noto Sans Thai","Archivo",ui-sans-serif,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141310; --panel:#201E19; --ink:#F7F5F0; --ink-2:#A8A296;
    --rule:#33302A; --rule-soft:#28251F;
    --accent:#F79A3E; --accent-deep:#F0871F;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.7;
  font-synthesis-weight:none;
}
.wrap{max-width:60rem; margin:0 auto; padding:0 1.5rem}
a{color:var(--accent-deep); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px}
h1,h2,h3{font-family:var(--sans); font-weight:600; line-height:1.15; letter-spacing:-.012em; margin:0}
:lang(th){font-family:var(--thai); line-height:1.85}

/* ---------- back-link ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  margin:2.5rem 0 0; transition:color .2s ease
}
.back-link:hover{color:var(--accent-deep)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule); padding:2.5rem 0 2.25rem}
.masthead h1{font-size:clamp(2rem,5.4vw,3.4rem)}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep);
  margin:0 0 1.25rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap
}
/* the orange block the magazine sets its logo against */
.logo-chip{
  display:inline-block; background:var(--accent); color:#16150F;
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:0;
  text-transform:none; padding:.12em .55em; border-radius:1px
}
.standfirst{font-size:1.2rem; color:var(--ink-2); margin:1.5rem 0 0; text-wrap:pretty}

/* ---------- cover, as the focus ---------- */
.cover-block{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:0 3rem; align-items:center; padding:3.5rem 0 0
}
.cover-figure{margin:0}
/* physical-object treatment: fixed white card in both themes, since it
   stands in for a printed magazine rather than themed UI chrome */
.cover-figure .cover-card{
  display:block; background:#fbfaf7; padding:.7rem .7rem .7rem;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.18);
  border-radius:1px; line-height:0; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease
}
.cover-figure .cover-card:hover,.cover-figure .cover-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -14px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.2)
}
.cover-figure img{display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,.12)}
.cover-figure figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); margin-top:.85rem; text-align:center
}

/* issue record beside the cover */
.issue-record{margin:0}
.issue-record h2{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 1.1rem
}
.issue-record dl{margin:0; display:grid; gap:.85rem}
.issue-record div{border-top:1px solid var(--rule-soft); padding-top:.55rem}
.issue-record dt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .25rem
}
.issue-record dd{margin:0; font-family:var(--sans); font-size:.95rem; line-height:1.45}

/* ---------- the two spreads: light-table arrangement ---------- */
.spreads{padding:4rem 0 0}
.spreads h2{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 1.75rem
}
.spread{margin:0 0 3rem}
.spread .plate{
  display:block; background:#fbfaf7; padding:.6rem; border-radius:1px; line-height:0;
  text-decoration:none;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.14);
  transition:transform .3s ease, box-shadow .3s ease
}
/* slight, alternating tilt so the two spreads read as loose sheets on a
   light table; they straighten under the pointer */
.spread--tilt-l .plate{transform:rotate(-1.1deg)}
.spread--tilt-r .plate{transform:rotate(.9deg)}
.spread .plate:hover,.spread .plate:focus-visible{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 24px 44px -16px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.18)
}
.spread img{display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,.1)}
.spread figcaption{
  font-family:var(--mono); font-size:.68rem; line-height:1.6; letter-spacing:.04em;
  color:var(--ink-2); margin-top:1.1rem
}
.spread figcaption b{color:var(--ink); font-weight:500}
.zoomhint{
  display:block; font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-deep); margin-top:.35rem
}
@media (prefers-reduced-motion:reduce){
  .cover-figure .cover-card,.spread .plate{transition:none}
  .spread--tilt-l .plate,.spread--tilt-r .plate{transform:none}
}

/* ---------- credits / finding-aid record ---------- */
.credits{margin:3.5rem 0 0; padding-top:2.25rem; border-top:1px solid var(--rule)}
.credits h2{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 1.5rem
}
.credits dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.25rem 2rem; margin:0; padding:0
}
.credits div{border-top:1px solid var(--rule-soft); padding-top:.6rem}
.credits dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 .3rem
}
.credits dd{margin:0; font-family:var(--sans); font-size:.95rem; line-height:1.5}
.credits .romanised{display:block; color:var(--ink-2); font-size:.85rem; font-style:italic}

/* ---------- the write-up ---------- */
.story{padding:4rem 0 0; max-width:38rem}
.story h2{font-size:1.5rem; margin:0 0 1.25rem}
.story h3{font-size:1.1rem; margin:2.75rem 0 .85rem}
.story p{margin:0 0 1.15rem; text-wrap:pretty}
.story p:last-child{margin-bottom:0}

blockquote.pull{
  margin:2.5rem 0; padding:1.4rem 1.6rem;
  background:var(--panel); border-left:3px solid var(--accent);
  border-radius:2px
}
blockquote.pull p{margin:0 0 .8rem; font-size:1.05rem}
blockquote.pull p:lang(th){font-size:1.02rem}
blockquote.pull p:last-of-type{margin-bottom:0}
blockquote.pull .attrib{
  display:block; margin-top:1rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)
}
.story q{quotes:"\201C" "\201D"; font-style:italic; color:var(--ink-2)}

/* ---------- provenance note ---------- */
.provenance{
  margin:3.5rem 0 0; padding:1.25rem 1.4rem; background:var(--panel);
  border-left:3px solid var(--rule); font-family:var(--sans);
  font-size:.92rem; line-height:1.6; color:var(--ink-2)
}
.provenance b{color:var(--ink); font-weight:600}
.provenance p{margin:0 0 .8rem}
.provenance p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--rule); margin-top:4rem; padding:2.5rem 0 5rem}
.colophon{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-2); margin:0}

/* ---------- mobile ---------- */
@media (max-width:52rem){
  .cover-block{grid-template-columns:1fr; gap:2.5rem 0; padding-top:2.5rem}
  .cover-figure{max-width:22rem; margin:0 auto}
  .story{padding-top:3rem}
}
@media (max-width:46rem){
  .wrap{padding:0 1.25rem}
  .masthead{padding:2rem 0 1.75rem}
  .standfirst{font-size:1.08rem}
  .spreads{padding-top:2.75rem}
  .spread{margin-bottom:2.25rem}
  .spread--tilt-l .plate,.spread--tilt-r .plate{transform:none}
  .credits{margin-top:2.5rem}
  blockquote.pull{padding:1.15rem 1.2rem}
  footer{padding-bottom:3.5rem}
}