/* ==========================================================================
   Alo Picks — shared stylesheet
   A one-editor selection letter, set like the plate pages of an art book.
   No build step, no framework, no dependencies.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  /* ink & sand */
  --ink:          #14110F;   /* page ground, warm near-black                */
  --ink-raise:    #1B1714;   /* raised bands (quote, method, colophon)      */
  --ink-deep:     #100D0B;   /* footer, one shade under the ground          */
  --sand:         #E8DFD2;   /* primary text                                */
  --sand-dim:     #A79E92;   /* secondary text — 7.0:1 on --ink             */
  --sand-faint:   #6F675E;   /* plate numerals, hairline captions           */
  --brick:        #C4653A;   /* accent — 4.8:1 on --ink                     */
  --brick-lift:   #D8834F;   /* accent for small text & links — 6.6:1       */

  --rule:         rgba(232, 223, 210, 0.14);
  --rule-strong:  rgba(232, 223, 210, 0.30);

  /* type */
  --display: "Instrument Serif", "Times New Roman", Times, serif;
  --body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Azeret Mono", "SFMono-Regular", Consolas, monospace;

  --label:      0.688rem;
  --micro:      0.813rem;
  --text:       clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --lead:       clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
  --h3:         clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --h2:         clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --h1:         clamp(2.875rem, 1.5rem + 7.4vw, 7.25rem);
  --numeral:    clamp(4.5rem, 3rem + 9vw, 11.5rem);

  /* measure & rhythm */
  --shell:      74rem;
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --band:       clamp(4.5rem, 9vw, 8.75rem);
  --col-gap:    clamp(1rem, 2vw, 1.75rem);
}

/* ------------------------------------------------------------- 2. baseline */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--body);
  font-size: var(--text);
  font-weight: 350;
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain — sits over everything, catches no clicks */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 0.98;
}

p { margin: 0; }

a {
  color: var(--brick-lift);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 131, 79, 0.38);
  padding-bottom: 0.08em;
  transition: color 0.18s ease, border-color 0.18s ease;
}

a:hover { color: var(--sand); border-bottom-color: var(--sand); }

:focus-visible {
  outline: 2px solid var(--brick-lift);
  outline-offset: 3px;
}

::selection { background: var(--brick); color: #14110F; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--sand);
  color: var(--ink);
  border: 0;
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: var(--label);
}
.skip:focus { left: 0; }

/* ------------------------------------------------------- 3. shared pieces */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }

.rule-top { border-top: 1px solid var(--rule); }

.label {
  display: block;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sand-faint);
}

.label--brick { color: var(--brick); }

.lead {
  font-size: var(--lead);
  line-height: 1.5;
  font-weight: 350;
  color: var(--sand);
}

.dim { color: var(--sand-dim); }

.measure    { max-width: 34rem; }
.measure-lg { max-width: 44rem; }

/* -------------------------------------------------------------- 4. reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------- 5. masthead */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.masthead__brand {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--sand);
  border: 0;
  padding: 0;
}
.masthead__brand:hover { color: var(--brick-lift); }

.masthead__issue { margin-right: auto; }

.masthead__nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead__nav a {
  color: var(--sand-dim);
  border: 0;
  padding: 0;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { color: var(--sand); }
.masthead__nav a[aria-current="page"] { color: var(--brick-lift); }

/* ------------------------------------------------------------ 6. entrance */

.entrance { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem); }

.entrance__eyebrow { margin-bottom: clamp(1.75rem, 4vw, 3rem); }

.entrance__title {
  font-size: var(--h1);
  max-width: 22ch;
}

.entrance__title em {
  font-style: italic;
  color: var(--brick);
}

.entrance__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

@media (min-width: 62rem) {
  .entrance__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: end;
  }
}

.entrance__note p + p { margin-top: 1.1em; }

/* signature — italic serif with a drawn stroke beneath */
.sign { margin-top: 2.25rem; }

.sign__name {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--sand);
  letter-spacing: 0.01em;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.sign__stroke {
  width: clamp(9rem, 18vw, 13rem);
  height: 20px;
  margin-top: 0.35rem;
  overflow: visible;
}

.sign__stroke path {
  fill: none;
  stroke: var(--brick);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.sign__role {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-faint);
}

/* the standing details beside the entrance note */
.standing { border-top: 1px solid var(--rule); }

.standing div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--micro);
  letter-spacing: 0.02em;
}

.standing dt { color: var(--sand-faint); text-transform: uppercase; font-size: var(--label); letter-spacing: 0.16em; }
.standing dd { margin: 0; color: var(--sand); text-align: right; }

/* --------------------------------------------------------- 7. plate flow */

.flow { padding-block: clamp(2rem, 4vw, 3rem) var(--band); }

.flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-strong);
}

.plate {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

.plate__num {
  grid-column: 1 / span 12;
  font-family: var(--display);
  font-size: var(--numeral);
  line-height: 0.76;
  color: var(--sand-faint);
  letter-spacing: -0.03em;
  transition: color 0.3s ease;
  margin-bottom: 0.4rem;
}

.plate:hover .plate__num,
.plate:focus-within .plate__num { color: var(--brick); }

.plate__body { grid-column: 1 / span 12; }

/* wall label */
.plate__kind {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--brick);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brick);
}

.plate__title {
  font-size: var(--h3);
  max-width: 26ch;
  line-height: 1.06;
}

.plate__meta {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--sand-dim);
}

.plate__meta li { display: flex; gap: 0.5rem; }
.plate__meta span { color: var(--sand-faint); }

/* the editor's note, set as marginalia */
.plate__note {
  margin-top: 1.5rem;
  padding-left: clamp(0.9rem, 2vw, 1.35rem);
  border-left: 1px solid var(--brick);
  max-width: 38rem;
  color: var(--sand-dim);
  font-size: var(--text);
  line-height: 1.66;
}

.plate__note strong {
  font-weight: 500;
  color: var(--sand);
}

@media (min-width: 54rem) {
  .plate__num { margin-bottom: 0; }

  /* odd plates read from the left, numeral hanging outward */
  .plate--l .plate__num  { grid-column: 1 / span 3; text-align: left;  margin-left: -0.08em; }
  .plate--l .plate__body { grid-column: 4 / span 8; }

  /* even plates step in, numeral hanging off the right edge */
  .plate--r .plate__num  { grid-column: 10 / span 3; text-align: right; margin-right: -0.08em; order: 2; }
  .plate--r .plate__body { grid-column: 2 / span 8; order: 1; }
  .plate--r .plate__note { margin-left: auto; }
}

.flow__tail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
}

/* --------------------------------------------------------- 8. pull-quote */

.quote {
  background: var(--ink-raise);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(4rem, 9vw, 8rem);
}

.quote blockquote {
  margin: 0;
  max-width: 52rem;
}

.quote p {
  font-family: var(--display);
  font-size: var(--h2);
  line-height: 1.08;
  letter-spacing: -0.014em;
  text-indent: -0.42em;
}

.quote .mark { color: var(--brick); }

.quote figcaption {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sand-faint);
}

/* -------------------------------------------------------- 9. method block */

.method__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .method__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
}

.method__title { font-size: var(--h2); max-width: 14ch; }

.method__sub { margin-top: 1.5rem; max-width: 30rem; }

.method__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }

.method__list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
}

.method__list b {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--brick);
  padding-top: 0.42em;
}

.method__list p { color: var(--sand-dim); }
.method__list p strong { color: var(--sand); font-weight: 500; }

/* ------------------------------------------------------------- 10. invite */

.invite {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.invite__line {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 2.1vw, 2.75rem);
  line-height: 1.14;
  max-width: 40rem;
}

.invite__line a {
  color: var(--brick-lift);
  border-bottom: 1px solid rgba(216, 131, 79, 0.5);
}
.invite__line a:hover { color: var(--sand); border-bottom-color: var(--sand); }

.invite__fine { margin-top: 1.5rem; font-family: var(--mono); font-size: var(--micro); color: var(--sand-faint); }

/* ----------------------------------------------------------- 11. colophon */

.colophon {
  background: var(--ink-raise);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.colophon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 48rem) {
  .colophon__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.colophon p + p { margin-top: 1em; }
.colophon .label + p,
.colophon .label + address { margin-top: 1.25rem; }

.colophon address {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--micro);
  line-height: 1.9;
  color: var(--sand-dim);
}

.colophon address strong { color: var(--sand); font-weight: 400; }

/* ------------------------------------------------------------- 12. footer */

.foot {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

.foot__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

@media (min-width: 40rem) {
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__cols > :last-child { text-align: right; }
}

.foot__mark {
  font-family: var(--display);
  font-size: 1.375rem;
  color: var(--sand);
  display: block;
  margin-bottom: 0.5rem;
}

.foot__cols p {
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--sand-faint);
  line-height: 1.8;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-bottom: 0.75rem;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .foot__links { justify-content: flex-end; }
}

.foot__links a { color: var(--sand-dim); border: 0; padding: 0; }
.foot__links a:hover { color: var(--brick-lift); }

/* --------------------------------------------------- 13. issue (selection) */

.issue { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }

.issue__title {
  margin-top: 1.5rem;
  font-size: clamp(2.5rem, 1.4rem + 5.4vw, 5.25rem);
  max-width: 24ch;
}

.issue__dateline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--sand-dim);
}

.issue__intro { margin-top: clamp(2rem, 4vw, 3rem); }
.issue__intro p + p { margin-top: 1.1em; }

/* code block + copy */
.code {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--rule-strong);
  background: var(--ink-raise);
  max-width: 34rem;
}

.code__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--rule);
}

.code__value {
  display: block;
  padding: clamp(1.35rem, 3vw, 2rem) 1.15rem;
  font-family: var(--mono);
  font-size: clamp(1.375rem, 1rem + 2vw, 2.125rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--sand);
  word-break: break-all;
}

.code__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--rule);
}

.copy {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--sand);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.copy:hover { background: var(--brick); border-color: var(--brick); color: #14110F; }
.copy[data-done="1"] { background: transparent; color: var(--brick-lift); border-color: var(--brick-lift); }

.copy__status {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-faint);
}

/* call to action */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding: 1.05rem 1.75rem;
  background: var(--brick);
  color: #14110F;
  border: 1px solid var(--brick);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.cta:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.cta span { font-size: 1.1em; line-height: 1; }

.fine {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: 38rem;
  font-size: var(--micro);
  line-height: 1.8;
  color: var(--sand-faint);
}

.fine a { color: var(--sand-dim); border-bottom-color: var(--rule-strong); }
.fine a:hover { color: var(--sand); }

.back {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-dim);
  border: 0;
  padding: 0;
}
.back:hover { color: var(--brick-lift); }

/* ------------------------------------------------------- 14. prose pages */

.doc { padding-block: clamp(3rem, 6vw, 5rem) var(--band); }

.doc__title { font-size: var(--h2); max-width: 22ch; }

.doc__stamp {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--micro);
  color: var(--sand-faint);
}

.doc__prose { max-width: 40rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.doc__prose h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: var(--h3);
}

.doc__prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

.doc__prose h3 {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brick);
}

.doc__prose p { margin-top: 1.1em; color: var(--sand-dim); }
.doc__prose p strong { color: var(--sand); font-weight: 500; }

.doc__prose ul { margin: 1.1em 0 0; padding: 0; list-style: none; }

.doc__prose li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.7em;
  color: var(--sand-dim);
}

.doc__prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--brick);
}

.doc__prose li strong { color: var(--sand); font-weight: 500; }

/* ---------------------------------------------------------- 15. not found */

.lost {
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.lost__num {
  font-family: var(--display);
  font-size: clamp(6rem, 4rem + 16vw, 16rem);
  line-height: 0.8;
  color: var(--sand-faint);
  letter-spacing: -0.04em;
}

.lost__title { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: var(--h2); max-width: 20ch; }
.lost__body { margin-top: 1.5rem; max-width: 34rem; }

.lost__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------- 16. motion preference */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }
}