/* ==========================================================================
   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 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. */

.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; color: rgba(250, 246, 233, .62) }
/* 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;
          color: rgba(250, 246, 233, .88) }
.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) }

/* Between phone and full width the footer's four columns do not fit, so they
   go to two. The measurements above are for 1200 and up. */

@media (max-width: 1200px) {
  .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: 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 }
.stop .built { position: static; width: auto; grid-column: 2; 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 this, and Book a Call stays out in the open beside it. */

.menu { display: none }

@media (max-width: 900px) {
  .topbar { position: relative; top: auto; left: auto; right: auto }
  .topbar nav { margin-left: auto }
  .menu { display: block }
  .menu summary { list-style: none; cursor: pointer; font-size: 15px;
                  font-weight: 700; letter-spacing: -.1px; padding: 12px 0 12px 18px }
  .menu summary::-webkit-details-marker { display: none }
  .menu .menu-close { display: none }
  .menu[open] .menu-open { display: none }
  .menu[open] .menu-close { display: inline }
  .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 }
}