/* ============================================================================
   About — the story page.
   Same cabinet as the rest of the site (skeuo.css): the page sits on the game's
   grass, the story itself is a long brass-rimmed espresso panel — the game's own
   dialog window, stretched to reading length.
   The COPY here is the owner's, verbatim, including every bold and italic.
   ============================================================================ */

/* (the "current page" brass ring now lives in navicons.css, with the nav, so
   every page shares one definition instead of a copy per stylesheet) */

/* ONE column width for the whole page: the story, every picture, and the park
   at the end all sit on the same two edges. --col is the text measure (~77
   characters a line) and is also the flagship carousel render's own pixel
   width, so that picture lands exactly 1:1 and still lines up. */
:root{ --col:711px; --story-pad:60px; }

.about{ max-width:1200px; margin:0 auto; padding:0 20px 24px; }

/* ── Hero: the opening line, set as the headline ──────────────────────────── */
.about__hero{ text-align:center; padding:56px 0 34px; }
.about__hook{
  margin:0 auto; max-width:24ch;
  font-size:clamp(30px,4.6vw,54px); text-wrap:balance;
  font-style:italic;
}
/* the two lit words — "dream", and his own bold-italic "20 years" */
.about__hook .hl,
.about__hook strong{
  color:var(--brass-light); font-weight:700;
  text-shadow:0 2px 0 var(--emboss-dark), 0 3px 6px rgba(0,0,0,.5),
              0 0 22px rgba(245,194,90,.45);
}

/* ── The story panel ──────────────────────────────────────────────────────── */
.story{
  /* +2px for the panel's own 1px borders (box-sizing is border-box), so the
     content box is exactly --col and the pictures line up with the finale */
  max-width:calc(var(--col) + var(--story-pad) * 2 + 2px); margin:0 auto;
  background:linear-gradient(180deg,#2F2114 0%,#1B1108 100%);
  border:1px solid var(--brass-mid); border-radius:12px;
  box-shadow:0 0 4px 1px rgba(0,0,0,.5) inset, var(--shadow-deep);
  padding:46px var(--story-pad) 50px;
}

/* the reading column — text and pictures share it, so their edges agree */
.story__col{ max-width:var(--col); margin:0 auto; }
.story__col::after{ content:""; display:block; clear:both; }

.story p{
  margin:0 0 1.3em;
  font-size:18.5px; line-height:1.78; color:var(--label);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.story p:last-child{ margin-bottom:0; }

/* bold = the places and the tools he names — the game's gold-title treatment */
.story strong{ color:var(--brass-highlight); font-weight:700; }
.story em{ font-style:italic; }

/* the beat between the microwave and the shelved dream */
.story__beat{
  clear:both;
  margin:1.9em 0 1.7em !important;
  text-align:center; color:var(--brass-mid);
  font-size:30px; line-height:1; letter-spacing:.55em; text-indent:.55em;
}

/* ── Figures ──────────────────────────────────────────────────────────────── */
.fig{ margin:0; }
.fig__frame{
  display:block; border-radius:8px; overflow:hidden;
  box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-mid), var(--shadow-drop);
}
.fig img{ width:100%; height:auto; display:block; }
/* captions are the owner's sentences, so they are set as sentences — no caps,
   no letter-spacing, both of which wreck anything longer than a label */
.fig figcaption{
  margin:10px auto 0; text-align:center; max-width:58ch;
  font-size:14px; line-height:1.5;
  color:var(--brass-light); text-shadow:0 1px 0 rgba(0,0,0,.7);
}

/* --natw is the picture's own pixel width, written on the figure by the build.
   Capping at it means no picture is ever blown up past its real resolution —
   the same "never upscale a sprite" rule the game renders by. */
.fig--float { float:right; width:39%; margin:.4em 0 1.2em 30px; }
.fig--wide  { clear:both; width:100%; max-width:var(--natw,100%); margin:2.1em auto 2em; }

.story__col > .fig--wide:last-child{ margin-bottom:0; }

/* ── The park, under the headline ─────────────────────────────────────────── */
/* same --col as the story below it, so the page keeps a single spine */
.fig--hero{ width:100%; max-width:var(--col); margin:0 auto 34px; }

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .about{ padding:0 14px 18px; }
  .about__hero{ padding:38px 0 30px; }
  .about__hook{ max-width:none; }
  .story{ padding:26px 20px 30px; border-radius:10px; }
  .story__col{ max-width:none; }
  .story p{ font-size:17px; line-height:1.72; }
  .fig--float,.fig--wide{
    float:none; width:100%; max-width:100%; margin:1.5em 0 1.4em;
  }
  .story__beat{ font-size:26px; }
  .fig figcaption{ font-size:13.5px; max-width:none; }
  .fig--hero{ max-width:100%; margin-bottom:22px; }
}