/* ==========================================================================
   matt-hart.com, the site layer.

   matt-hart.css is the design system as handed over, and it is not edited
   here. It was measured off pages drawn at a fixed 1600 wide, so it positions
   things absolutely. A site has to flow. This file is the difference between
   the two, and nothing else:

     1. a base, because a render source does not need one and a page does
     2. the topbar and footer as real components rather than drawn ones
     3. the wrappers that give the fixed columns something to sit in

   If a value here disagrees with matt-hart.css, matt-hart.css is right.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font-family: var(--sans); background: var(--cream);
       color: var(--ink); -webkit-font-smoothing: antialiased }
img, svg { max-width: 100%; height: auto }
ul { list-style: none; margin: 0; padding: 0 }
p { margin: 0 }
a { color: inherit }

/* ── the topbar, flowing ────────────────────────────────────────────────────
   The system draws it at a fixed top and side. Here it sits in the flow, so
   the first screen starts under it, and it keeps the same gutter as the page. */

.topbar { position: static; display: flex; align-items: center;
          justify-content: space-between; gap: 20px;
          padding: 34px var(--gutter) 0 var(--gutter) }
.topbar .wordmark { text-decoration: none }
.topbar nav a { text-decoration: none }
/* The nav rule is more specific than .cta, so the call to action was picking up
   the nav's grey. It is ink on yellow, and it is the only button on the site. */
.topbar nav a.cta { color: var(--ink); font-weight: 800 }
/* The page you are on, as the Work PDF draws it: the word goes bold, so the
   line under it can be lighter, 2px with a 4px gap. The design system says
   3 and 3 with no weight change; the drawn page reads better. */
.topbar nav a.on { font-weight: 800; border-bottom-width: 2px; padding-bottom: 4px }

/* ── the page body ──────────────────────────────────────────────────────── */

.wrap { padding: 0 var(--gutter) }
.holding { padding: 120px var(--gutter) 180px var(--gutter); max-width: 900px }
.holding .eyebrow { display: block; margin-bottom: 26px }
.holding p { margin-top: 22px; max-width: 640px }

/* ── the footer ─────────────────────────────────────────────────────────────
   Four columns: the six properties, this site, elsewhere, the address. The
   left edge aligns to the page's own content column, which is why the system
   makes it a variable. */

/* Blurb and list colour come from matt-hart.css: full cream, never knocked
   back (the design system's updated rule, 18 Sept). */
.ftr .cols { display: grid; grid-template-columns: 280px 400px 210px 1fr;
             gap: 40px; align-items: start; max-width: 1300px }
.ftr .mk { font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1 }
.ftr .blurb { font-size: 17px; line-height: 1.5; margin-top: 20px;
              max-width: 280px }
/* The words are the anti-scrape, not the type: the render sets this in Figtree
   bold at 18 with a 3px line, and only writes the address out in words. */
.ftr .mail { display: inline-block; font-size: 18px; font-weight: 700;
             letter-spacing: -.3px; margin-top: 28px;
             border-bottom: 3px solid var(--yellow); padding-bottom: 5px }
.ftr h5 { margin: 0 0 24px 0; font-weight: 500 }
.ftr li { font-size: 17.5px; line-height: 1.35; margin-bottom: 15px }
.ftr li a { text-decoration: none }
.ftr li i { font-family: var(--mono); font-style: normal; font-size: 12.5px;
            color: rgba(250, 246, 233, .38); margin-right: 12px; letter-spacing: .06em }
.ftr .six { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px }
.ftr .soc { display: flex; gap: 20px; align-items: center; margin-top: 30px;
            padding-top: 26px; max-width: 210px;
            border-top: 1px solid rgba(250, 246, 233, .14) }
.ftr .soc a { display: block; line-height: 0 }
.ftr .soc svg { width: 21px; height: 21px; display: block; fill: rgba(250, 246, 233, .72) }
.ftr .base { display: flex; justify-content: space-between; align-items: flex-end;
             margin-top: 74px; padding: 26px 0 44px; max-width: 1300px;
             border-top: 1px solid rgba(250, 246, 233, .14) }
.ftr .base span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
                  text-transform: uppercase; color: rgba(250, 246, 233, .42) }

/* The four columns need about 1210 plus the left edge (230 on Home and
   Research) plus the 120 gutter, so below 1500 they overflowed the window.
   Measured 18 Sept after Matt caught it: they go to two below 1500. */

@media (max-width: 1499px) {
  .ftr .cols { grid-template-columns: 1fr 1fr; gap: 44px }
}

/* ── at phone width ─────────────────────────────────────────────────────────
   The real design. The nav loses its labels rather than wrapping, because the
   one thing anybody does from a phone is book a call. */

@media (max-width: 900px) {
  .topbar { padding-top: 22px }
  .topbar .wordmark { font-size: 27px; letter-spacing: -1.1px }
  .topbar nav a:not(.cta) { display: none }
  .cta { font-size: 15px; padding: 12px 20px; margin-left: 0 }
  .ftr { padding: 64px var(--gutter) 0 var(--gutter) }
  .ftr .cols { grid-template-columns: 1fr; gap: 44px }
  .ftr .six { grid-template-columns: 1fr }
  /* Stacked, because the two do not fit on one line. The signature still
     belongs on the right hand edge, the way the render pairs them. */
  .ftr .base { flex-direction: column; align-items: stretch; gap: 14px;
               margin-top: 48px; padding-bottom: 36px }
  .ftr .base .sig { align-self: flex-end }
  .holding { padding: 64px var(--gutter) 90px var(--gutter) }
}

/* ==========================================================================
   The home scroll.

   The system positions the descent absolutely, because it was measured off a
   page drawn at 1600 by 7691. Here the same values run as a flowing grid, so
   the type sizes, the columns and the rail keep their measurements and the
   page can be any height.
   ========================================================================== */

/* ── 01 the open ────────────────────────────────────────────────────────── */

.open { position: relative; padding: 96px var(--gutter) 40px var(--gutter) }
.open-words { max-width: 760px; position: relative; z-index: 2 }
.open .eyebrow { display: block }
.open .hero { margin: 18px 0 0 0; font-weight: 800 }
.open .ask { margin-top: 44px; max-width: 640px }

/* The line spans the full measure. The berg hangs off it, lifted by its own
   waterline, so the two register at every width rather than at one. */
.wl-row { position: relative; margin: 40px 0 44px 0 }
.wl-row .wl-drawn { position: relative; z-index: 2 }
.open-berg { position: absolute; right: 0; top: 50%; width: 34%; max-width: 460px;
             transform: translateY(-30.7%); z-index: 1 }
.berg-sketch { width: 100%; height: auto }
.berg-sketch path { stroke: var(--ink) }

/* ── 02 the set up ──────────────────────────────────────────────────────── */

.setup { padding: 40px var(--gutter) 92px var(--gutter); max-width: 860px }
.setup .narration { opacity: .75 }
.setup .question { margin-top: 10px }
.setup .narration + .narration { margin-top: 20px }
.setup .question + .narration { margin-top: 20px }
.setup .dropline { margin-top: 26px }

/* ── the waterline bar, at the foot of the surface ──────────────────────── */

.wl-bar { position: relative; height: var(--wl-bar); background: var(--yellow) }

/* ── 03 the descent ─────────────────────────────────────────────────────── */

.descent { position: relative; padding: 96px 0 96px 0 }

/* The rail is not one line behind everything. It breaks around every numeral,
   the way the render source breaks it: 14 above the tick, 38 below it. So each
   stop and each segue draws its own segment, and the gap is where the age is. */

.descent::before, .stop::before, .segwrap::before {
  content: ""; position: absolute; left: var(--rail-x); width: var(--rail-w);
  background: var(--yellow); z-index: 1 }
.descent::before { top: 0; height: calc(96px - 23px) }
.stop::before { top: 32px; bottom: -128px }
.segwrap::before { top: 0; bottom: calc(-128px + 23px) }
.stop:first-of-type::before { top: 32px }
.segwrap--last::before { bottom: 0 }
/* A class, not :last-of-type. The rail fade is a div after it, so
   :last-of-type never matched, and the last segue kept its full margin on top
   of the descent's own padding. */
.segwrap--last .seg { margin-bottom: 0 }

/* and it fades out into the dark just before the floor */
.rail-fade { position: absolute; left: var(--rail-x); width: var(--rail-w);
             bottom: 0; height: 260px; z-index: 2;
             background: linear-gradient(180deg, rgba(4,9,12,0), var(--floor) 78%) }

.stop { position: relative; padding: 0 var(--gutter) }
.segwrap { position: relative }
.stop + .seg, .seg { margin: 128px auto; padding: 0 var(--gutter);
                     max-width: var(--col-segue-w); text-align: center }
 /* Measured off the design render itself, not the code that made it. At 1600
    wide: the tick sits 48 above the headline, the age sits level with it, and
    the rail breaks from 23 above to 32 below. */
.stop-rail { position: absolute; left: 0; top: -48px; width: var(--col-story-x);
             z-index: 3; pointer-events: none }
.stop-rail .tick { position: absolute; left: 80px; width: var(--tick-w); height: var(--tick-h) }
.stop-rail .tick path { stroke: var(--yellow) }
/* The age is centred in the gap, not hung from its top. The gap runs from 23
   above the headline to 32 below, so its centre is 4.5 below: 48 + 4.5 here,
   then lifted by half its own height, whatever size it is set at. */
.stop-rail .rail-num { position: absolute; left: 78px; top: 52.5px; width: 64px;
                       transform: translateY(-50%);
                       text-align: center; font-family: var(--mono); font-size: 18px;
                       letter-spacing: .12em; color: var(--cream); opacity: .88 }

/* The rhythm the render source sets, and the reason the page steps down:
   the built block starts 34px BELOW where the story ends, never beside it.
   Then 128px to the segue, and 128px again to the next stop. */

.stop-cols { display: grid;
             grid-template-columns: minmax(0, var(--col-story-w)) minmax(0, 1fr);
             column-gap: 60px;
             padding-left: calc(var(--col-story-x) - var(--gutter)) }
.stop .story { position: static; width: auto; grid-column: 1; grid-row: 1 }
.stop .story h2 { margin: 0 }
/* The five words never break. Six of them read as one act only if they set
   identically every time. */
.built-say { white-space: nowrap }
/* It spans both columns and sits hard right, which is where the render puts
   it ("120 from right") and holds when the second column runs out of room: in
   column two alone it spilled past the gutter between 900 and 1150. */
.stop .built { position: static; width: auto; grid-column: 1 / -1; grid-row: 2;
               justify-self: end; text-align: right; max-width: var(--col-built-w);
               margin-top: 34px }
/* The gaps under the line belong to the design system: 20 to the descriptor,
   18 to the address. A blanket reset here once flattened both. */
.stop .built .desc { margin: 20px 0 0 0 }
.stop .built .nm { margin: 18px 0 0 0 }
/* Each mark at the height the render source sets it, measured at 1600 wide.
   Set as classes rather than a custom property: an inline custom property was
   being dropped, and the marks fell back to their natural size. */
.built-mark { display: inline-block; width: auto; max-width: 100%;
              margin-top: 30px; opacity: .96 }
.mark-superfandom     { height: 74px }
.mark-betterideasfaster { height: 62px }
.mark-industryapproved  { height: 58px }
.mark-madix             { height: 64px }
.mark-ideas-school      { height: 76px }
.mark-bifkids           { height: 108px }
.built-mark:first-child { margin: 0 0 28px 0 }
.seg { position: static; width: auto }

/* ── 04 the floor ───────────────────────────────────────────────────────── */

/* The floor copy aligns to the footer's left edge, not the page gutter, so the
   two blocks sit on one line down the page. */
.floor { padding: 96px var(--gutter) 140px var(--ftr-left, 230px) }
.floor-words { max-width: none }
.floor .narration, .floor .headline, .floor-line,
.floor .body-lg, .floor .click { max-width: 760px }
.floor .headline { margin: 20px 0 0 0 }

/* The line and the berg share a box, and the berg hangs off the line: lifted
   by its own waterline, which the source puts at 28.3 per cent of its height.
   So the two register at any width, the same way the open does. */
.floor-pin { position: relative }
.floor-line { font-size: 30px; font-weight: 800; letter-spacing: -.9px;
              line-height: 1.25; margin-top: 34px }
.floor-berg { position: absolute; right: 0; top: 50%; width: 40%; max-width: 520px }
.floor .body-lg { margin-top: 18px }
.floor-bold { font-weight: 700 }
.click { display: inline-block; margin-top: 48px; font-size: 40px; font-weight: 900;
         letter-spacing: -1.2px; line-height: 1.1;
         border-bottom: 4px solid var(--yellow); padding-bottom: 7px }
.floor-berg > img:not(.berg-word) { display: block; width: 100% }

/* MAKE and CREATE, at the proportions the render source sets them: MAKE at
   36 per cent of the berg's width, sitting clear above the waterline, CREATE at
   48 per cent, below it. Measured off the source, not sized by eye. */
.berg-word { position: absolute }
/* Lifted by its own waterline. Measured in the artwork itself: the yellow line
   inside berg_arrows.png sits at 30.67 per cent of the image height. */
.floor-berg { transform: translateY(-30.67%) }
.berg-make   { left: 32.6%; top: 14.9%; width: 36% }
.berg-create { left: 26.6%; top: 59.2%; width: 48% }

/* ── the scroll at phone width ──────────────────────────────────────────────
   One column. Story, then the built thing under it, then the segue. The rail
   stays as a thin line down the edge with the numerals tucked against it. */

@media (max-width: 900px) {
  .open { padding-top: 52px }
  /* The comma breaks are a desktop measure. On a phone the line finds its own. */
  .hero .lb, .floor .headline .lb, .built .desc .lb { display: none }
  .wl-row { margin: 26px 0 30px 0 }
  .open .ask { margin-top: 32px }
  .open-berg { position: static; transform: none; width: 56%; max-width: 230px;
               margin: 30px auto 4px auto }
  .setup { padding-bottom: 64px }
  .descent { padding: 64px 0 90px 0 }
  .stop { padding: 0 var(--gutter) 0 var(--col-story-x) }
  .stop-cols { grid-template-columns: 1fr; gap: 0; padding-left: 0 }
  /* One column means the built thing comes back into the flow. Left in column
     two it made the grid invent a second column and squeezed the story. */
  .stop .story { grid-column: 1; grid-row: auto }
  .stop .built { grid-column: 1; grid-row: auto; justify-self: start;
                 text-align: left; max-width: none; margin-top: 34px }
  /* The marks are set at their 1600 wide heights. On a phone they come down
     with everything else. */
  /* on a phone they come down with the type, which drops to 84 per cent */
  .mark-superfandom       { height: 62px }
  .mark-betterideasfaster { height: 52px }
  .mark-industryapproved  { height: 49px }
  .mark-madix             { height: 54px }
  .mark-ideas-school      { height: 64px }
  .mark-bifkids           { height: 91px }
  .stop-rail .tick { left: 4px; width: 44px; height: 13px }
  .stop-rail .rail-num { left: 0; top: 52.5px; width: 52px; font-size: 12px;
                         letter-spacing: .06em; white-space: nowrap }
  .seg { margin: 56px auto; padding: 0 var(--gutter) 0 var(--col-story-x) }
  /* Each rail segment runs on past its own box by the gap to the next one, so
     the break lands where the age is. That gap is 128 at full width and 56
     here, and the 128s were still being used: the line ran straight through
     every numeral. Same arithmetic, phone numbers. */
  .descent::before { height: calc(64px - 23px) }
  .stop::before { bottom: -56px }
  .segwrap::before { bottom: calc(-56px + 23px) }
  .floor { padding: 64px var(--gutter) 90px var(--gutter) }
  /* Relative, not static: MAKE and CREATE are positioned as percentages of
     the berg. Taking the berg out of position handed them to .floor-pin, and
     they climbed off the artwork. */
  .floor-berg { position: relative; transform: none; width: 100%; max-width: none;
                margin: 40px 0 8px 0 }
  .floor-line { font-size: 23px; letter-spacing: -.6px; margin-top: 26px }
  .click { font-size: 27px; letter-spacing: -.8px; margin-top: 36px }
}

/* ── legibility, on screen ──────────────────────────────────────────────────
   The spec sets the set up narration at 75 per cent, which is right on a
   printed render and too knocked back on a lit screen. Matt's call, 18
   September: full ink. Body copy on the dark grounds was already full cream.
   The only things still dimmed are mono labels, which is what dimming is for. */

.setup .narration { opacity: 1 }
.floor .narration { opacity: 1 }

/* The signature, at the foot of every page. */
/* the signature, keyed to the dark ground the way the render does it */
.ftr .sig { width: 130px; filter: invert(1); opacity: .7 }

/* ── the phone menu ─────────────────────────────────────────────────────────
   Hidden at full width, where the nav shows all four links. On a phone the
   links fold into a two line button, and Book a Call sits hard right.
   Matt, 18 Sept. The words Menu and Close stay in the button for screen
   readers; only the lines show. */

.menu { display: none }

@media (max-width: 900px) {
  .topbar { position: relative; top: auto; left: auto; right: auto }
  .topbar .menu { display: block; order: 1; margin-left: auto }
  .topbar nav { order: 2; margin-left: 12px }
  .menu summary { list-style: none; cursor: pointer; position: relative;
                  width: 44px; height: 44px; display: block }
  .menu summary::-webkit-details-marker { display: none }
  .menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                       clip: rect(0 0 0 0); white-space: nowrap }
  /* the two lines, and the cross they turn into */
  .menu summary::before, .menu summary::after {
    content: ""; position: absolute; left: 10px; width: 24px; height: 2.5px;
    border-radius: 2px; background: currentColor; transition: transform .2s ease, top .2s ease }
  .menu summary::before { top: 17px }
  .menu summary::after { top: 25px }
  .menu[open] summary::before { top: 21px; transform: rotate(45deg) }
  .menu[open] summary::after { top: 21px; transform: rotate(-45deg) }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
                display: flex; flex-direction: column; gap: 22px;
                padding: 30px var(--gutter) 36px var(--gutter);
                background: var(--cream); border-bottom: 1px solid rgba(16, 17, 18, .14) }
  .menu-panel a { font-size: 27px; font-weight: 800; letter-spacing: -.8px;
                  line-height: 1.1; color: var(--ink); text-decoration: none;
                  align-self: flex-start }
  .menu-panel a.on { border-bottom: 3px solid var(--yellow); padding-bottom: 3px }
  .topbar--dark .menu-panel { background: var(--floor); border-bottom-color: rgba(250, 246, 233, .14) }
  .topbar--dark .menu-panel a { color: var(--cream) }
}

/* ── the built block and the segue, on a phone ──────────────────────────────
   Matt's call, 18 September, breaking his own rule on purpose. At full width
   the columns separate story, built block and segue. On a phone they stack,
   so two things do that work instead: the built block goes right, which keeps
   the zig-zag, and the segues go yellow. Phone only. */

@media (max-width: 900px) {
  .stop .built { justify-self: stretch; text-align: right }
  .descent .seg { color: var(--yellow) }
  /* The descent hands to the floor in the design's 96, not 210. */
  .descent { padding-bottom: 56px }
  .floor { padding-top: 40px }
}

/* The addresses on the home scroll act like the Work buttons, and look exactly
   as they did: no colour, no underline. Matt, 18 Sept. */
.built .nm a { color: inherit; text-decoration: none }

/* The footer address goes to Contact: on this site a yellow underline is
   always a link (Matt, 19 Sept). Still written out, still anti-scrape. */
.ftr a.mail { color: inherit; text-decoration: none }

/* ── the ages sit level with their headlines ────────────────────────────────
   Matt, 19 Sept: on Research each numeral lines up with its label; on Home the
   age sat 24 above the headline's first line (14 on a phone). Measured by
   baseline, the age now moves down onto the headline, and the break in the
   rail moves with it: 8 clear above the age, 19 below, as Research spaces it. */
.stop-rail .rail-num { top: 76.5px }                   /* 52.5 + 24 */
.stop::before, .stop:first-of-type::before { top: 59px }
.segwrap::before { bottom: -137px }                    /* 128 to the next stop, + 9 */
.descent::before { height: 105px }                     /* 96 + 9 */

@media (max-width: 900px) {
  .stop-rail .rail-num { top: 66.5px }                 /* 52.5 + 14 */
  .stop::before, .stop:first-of-type::before { top: 46px }
  .segwrap::before { bottom: -58px }                   /* 56 + 2 */
  .descent::before { height: 66px }                    /* 64 + 2 */
}