/* classify.ai/about, the Amble register on the root house.

   Canon: design/design-guidelines-amble.md for tokens and type; the layout is
   design/sep1/mock-about-v13.html. This sheet loads AFTER landing.css and adds
   only what this page has and the landing does not. Every token is consumed
   from the landing's synced block; nothing is redeclared here.

   The header and the footer strip are the landing's, untouched, and the chrome
   is now entirely the landing's: this document adds one rule to it, the brand
   link. The nav pill's pine came from a scoped rule here while this branch and
   #422 were both in flight, written so the page was right whichever landed
   first. #422 landed, landing.css carries the ruling itself, and that rule has
   been deleted as it said it should be.

   Photos are allowed on this page by ruling (the register's "none on root"
   holds for the landing). They ship ungraded, as <img> elements in
   aspect-ratio boxes, never as backgrounds, so the crop is identical at every
   width. */

/* ---- chrome, this page's one delta ----------------------------------------- */

/* The brand is a link on this page. */
.about .brand{color:inherit; text-decoration:none}

/* THE PINE NAV PILL RULE IS GONE, and nothing replaced it. This page carried
   `.about header nav a:last-child{background:var(--pine); color:var(--oat)}`
   while the landing's own rule still painted that pill ink. #422 moved pine to
   the nav pill on every house, so landing.css now sets the identical two
   declarations at header nav a:last-child, and this page loads landing.css
   byte for byte. The scoped copy was a duplicate of the house rule, and a
   duplicate of a rule is a place for the two to drift apart.

   The pill is still asserted pine here, by computed style, in "pine is the nav
   pill and two bands and nothing else": that test does not care which
   stylesheet supplies it, which is exactly why the delete is safe and why the
   assertion did not need to move with it. */

/* ---- type ------------------------------------------------------------------ */

/* 700 is reserved for the h1 payoff on root; this page's titles are 500. The
   landing's h1 rule also carries a max-height and a transition for its results
   mode; neither has a job here, so both are switched off rather than left as a
   latent fade. */
.about h1{
  font-weight:500; font-size:64px; line-height:1.04; letter-spacing:-0.01em;
  text-transform:lowercase; max-height:none; transition:none;
}
.about h2{
  font-weight:500; font-size:34px; line-height:1.12; letter-spacing:-0.01em;
  text-transform:lowercase;
}

/* ---- mission --------------------------------------------------------------- */

/* h1 left, paragraph right, the paragraph's last line on the h1's baseline.
   On the same 1180 measure as the sections below: the mockup's 44px gutters
   land on that measure at its own width, and pinning it keeps the h1 and the
   h2s on one left edge at 1440 rather than 86px apart. */
.mission{
  display:grid; grid-template-columns:1fr 1.2fr; gap:64px;
  align-items:last baseline; padding:72px 44px 48px;
  max-width:1180px; margin:0 auto;
}
.mission p{font-size:19px; max-width:560px; margin:0}

/* ---- hero photo band ------------------------------------------------------- */

/* The box is locked to 2.4:1 as mocked. The image covers it and is anchored a
   little below centre so the horizon sits where the mockup put it. The band
   runs to the measure's outer edge (1180), 44px past the text on each side,
   which is the mockup's own overhang at its authoring width. */
.band-img{
  width:min(1180px, calc(100% - 88px)); margin:0 auto;
  border-radius:14px; overflow:hidden; aspect-ratio:2.4/1;
}
.band-img img{width:100%; height:100%; object-fit:cover; object-position:center 60%; display:block}

/* ---- argument and record --------------------------------------------------- */

.about section{padding:88px 0}
.about .wrap{max-width:1180px; margin:0 auto; padding:0 44px}
.about .oat2{background:var(--oat-2)}

.big h2{font-size:44px; max-width:760px; margin-bottom:28px}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:40px; font-size:18px; line-height:1.6}
.cols p{margin:0 0 16px}
.cols p:last-child{margin-bottom:0}

.sub{font-size:18px; max-width:640px; margin:0}

/* Two hairline-topped items. The hairline is the register's --hair. */
.alt{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px}
.alt > div{border-top:1px solid var(--hair); padding-top:16px}
.alt b{display:block; font-weight:500; font-size:19px; margin-bottom:6px; text-transform:lowercase}
.alt p{margin:0}

/* ---- checkerboard, full bleed ---------------------------------------------- */

/* Three rows of two. The photo cell fixes the row height through its 4:3 box
   and the text cell beside it stretches to match; the text centres inside. */
/* minmax(0,1fr), not 1fr (Oct 5 2026): a bare 1fr track has an auto minimum,
   so the photos' intrinsic width widened the board past the viewport from 721
   up to about 1200 and the page scrolled sideways. */
.checker{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.checker .cell{padding:56px 64px; display:flex; flex-direction:column; justify-content:center}
.checker .pine{background:var(--pine); color:var(--oat-2)}
.checker .sand{background:var(--sand)}
.checker .photo{padding:0; display:block; aspect-ratio:4/3}
.checker .photo img{width:100%; height:100%; object-fit:cover; display:block}
.checker .ph-oculus img{object-position:center 30%}
.checker .ph-pier img{object-position:35% center}
.checker h2{font-size:32px; margin-bottom:18px}
.checker p{max-width:440px; font-size:17px; margin:0}

/* ---- join ------------------------------------------------------------------ */

.join{background:var(--sand)}
.pineband{
  background:var(--pine); color:var(--oat-2);
  border-radius:18px; padding:56px 48px; text-align:center;
}
.pineband p{margin:12px auto 26px; max-width:560px}
/* The one button on this page. Cream on the pine band, as mocked: the pine in
   this viewport is the band, never the button. #EDE7DB is the estate's cream
   and is not yet a token in tokens.css; it is the same value the dark house
   uses for its hero button. */
.pill{
  display:inline-block; padding:11px 22px; border-radius:999px;
  background:#EDE7DB; color:var(--pine);
  font-weight:500; font-size:15px; text-decoration:none; 
}

/* ---- responsive, down to 390 ----------------------------------------------- */

/* Under 640 the hero box goes to 16:9 (ruled Sep 2 2026). At 2.4:1 a 390
   viewport gave the road a 144px strip; 16:9 keeps the same crop rule and the
   same anchor, and the horizon stays where it was. */
@media (max-width:640px){
  .band-img{aspect-ratio:16/9}
}

@media (max-width:720px){
  .mission{grid-template-columns:1fr; gap:28px; padding:40px 22px 32px}
  .about h1{font-size:44px}
  .mission p{font-size:18px}
  .band-img{width:calc(100% - 44px)}
  .about section{padding:64px 0}
  .about .wrap{padding:0 22px}
  .big h2{font-size:34px}
  .cols{grid-template-columns:1fr; gap:0}
  .cols p:last-child{margin-bottom:16px}
  .cols > div:last-child p:last-child{margin-bottom:0}
  .alt{grid-template-columns:1fr; gap:22px}
  /* One column, and in every row the photo sits above its text. The source
     order is row-major for the two-column board, so the two rows whose text
     cell comes first swap here. */
  .checker{grid-template-columns:1fr}
  .checker .cell{padding:40px 22px}
  .checker .photo{padding:0}
  .checker h2{font-size:28px}
  .checker > :nth-child(1){order:2}
  .checker > :nth-child(2){order:1}
  .checker > :nth-child(3){order:3}
  .checker > :nth-child(4){order:4}
  .checker > :nth-child(5){order:6}
  .checker > :nth-child(6){order:5}
  .pineband{padding:40px 24px; border-radius:14px}
}