/* =========================================================================
   ZEUS FABER — mobile
   Figma "Mobile" frames, 393 wide with a 16 margin (361 of content).

   Below the breakpoint 1rem becomes one MOBILE design pixel (393 wide rather
   than 1440), so every number here is again the literal value off the canvas.
   The overture keeps its absolute geometry; from the nav down the page is a
   single flowing column, because the mobile stack is one column and flowing
   it means the sections Figma does not draw fall in the right place too.
   ========================================================================= */

@media (max-width: 767px) {

  /* the scale is set by site.js; this is the pre-script fallback */
  html { font-size: calc(100vw / 393); }

  /* ------------------------------------------------------------- type --- */
  /* Millionaire Roman 50 / 55 / -2.5 */
  .t-display {
    font-size: 50rem;
    line-height: 55rem;
    letter-spacing: -2.5rem;
    margin-top: 2.25rem;
  }
  /* Millionaire Italic 40 / 45 / -2.4, set in five lines */
  .t-hero {
    font-size: 40rem;
    line-height: 45rem;
    letter-spacing: -2.4rem;
    margin-top: 1.3rem;
  }
  .t-hero .last { line-height: 45rem; }
  /* the statement is set in five lines on mobile */
  .hero-type { white-space: normal; width: 343rem; }
  .mbr { display: block; }
  /* Serrif Mono 12 — nav and the favourites list */
  .mono, .t-mono { font-size: 12rem; }
  .t-mono { margin-top: -3.132rem; }
  /* Serrif Mono 12 / 1.5 — every run of body copy on the narrow canvas */
  .t-body {
    font-size: 12rem;
    line-height: 1.5;
    letter-spacing: 0;
    margin-top: -5.07rem;
  }
  .meta-row, .meta-row > p, .meta-eu-alt, .meta-ob,
  .m-meta-m, .m-meta-zf { font-size: 10rem; }
  .meta-row > p, .meta-eu-alt, .meta-ob,
  .m-meta-m, .m-meta-zf { margin-top: -2.61rem; }
  /* the overture columns are one 361 column at 12 / 1.5 / -0.5, set to wrap
     rather than to the hand-cut lines the wide canvas uses */
  .t-mcol {
    font-size: 12rem;
    line-height: 1.5;
    letter-spacing: -0.5rem;
    margin-top: -5.07rem;
    white-space: normal;
  }
  /* the initial is stood off with a float the width of the mark and its
     gutter, two rows deep, so exactly two lines clear it whatever the copy
     does */
  .col-mobile > p:first-child::before {
    content: "";
    float: left;
    width: 30.1rem;
    height: 26.652rem;
  }

  /* ------------------------------------------------------------ shell --- */
  /* the designed heading block is placed inside the padding; the section
     stack flows below it, starting on the first rule at 1711 */
  .canvas { width: 100%; padding: var(--mflow) 16rem 0; }
  .footer .canvas { padding: 0; }
  main { height: auto; }

  /* ------------------------------------------------------------- strip -- */
  .ticker { top: 0; height: 45.278rem; }
  .ticker-rail { top: 16rem; }

  /* --------------------------------------------------------------- nav --- */
  .nav { height: 47rem; }
  .nav .canvas { height: 47rem; }
  .nav-links { display: none; }
  .nav-menu {
    position: absolute;
    left: 16rem;
    top: 19rem;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
  }
  .nav-here { text-decoration: underline; text-underline-offset: 2rem; }
  .nav-caret { display: inline-block; transition: transform 0.25s var(--ease); }
  .nav-menu[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
  .nav .logo { top: 6rem; }
  .cipher { left: calc(75% - 16.75rem); width: 115rem; }
  .cipher .cipher-label, .cipher .cipher-typed { top: 19rem; }
  .cipher .cipher-typed, .cipher-input { left: 48rem; }
  .caret { left: 48rem; top: 19rem; width: 6rem; height: 12rem; }
  .cipher-input { top: 14rem; width: 99rem; }

  /* the sheet the nav caret opens */
  .nav-sheet {
    position: absolute;
    left: 0;
    top: 47rem;
    width: 100%;
    background: var(--bg);
    border-bottom: 1rem solid currentColor;
    /* 30 of clear space above the first cap, between every pair of caps and
       below the last one — the link padding carries half of each gap so the
       rows stay a comfortable tap target. */
    padding: 14.53rem 16rem 15.32rem;
    display: none;
  }
  .nav.is-open .nav-sheet { display: block; }
  .nav-sheet a {
    position: static;          /* .nav a is placed absolutely on desktop */
    display: block;
    left: auto;
    top: auto;
    transform: none;
    padding: 12.339rem 0;
    margin: 0;
    font-size: 12rem;
    text-align: left;
    text-decoration: none;
  }
  .nav-sheet a.current { text-decoration: underline; text-underline-offset: 2rem; }

  /* ------------------------------------------------------------ toggle -- */
  .theme-toggle { right: 16rem; bottom: 16rem; }

  /* ------------------------------------------------------------ intro --- */
  .hero-layer { left: 0; width: 100%; margin-left: 0; }
  .hero-video { left: 50%; width: 746rem; margin-left: -373rem; height: 420rem; top: 216rem; }
  .hero-type { top: 95rem; }
  /* The lockup type is set at the colophon's size, and the emblem stands the
     same 10.25 clear of ZEUS as it does of FABER. With the mono cap trim in
     place, `top` here is the cap top. */
  .lockup .zeus, .lockup .faber { font-size: 16rem; margin-top: -4.176rem; }
  .lockup .emblem { top: 379rem; }
  .lockup .zeus  { left: 130.69rem; top: 394.56rem; }
  .lockup .faber { left: 227.75rem; top: 394.56rem; }
  .hero-cols .col-left, .hero-cols .col-right { display: none; }
  .hero-cols .col-mobile { position: absolute; left: 16rem; top: 495rem; width: 361rem; }
  .hero-cols .dropcap { left: 16rem; top: 495rem; width: 25.038rem; height: 26.652rem; }

  /* --------------------------------------------------------- headings --- */
  /* the display pairs are set as designed, so they stay placed */
  .display-l { left: 16rem !important; }
  .display-r { left: 377rem !important; }
  .m-y-1041 { top: 1041rem !important; }
  .m-y-1276 { top: 1276rem !important; }
  .m-y-1331 { top: 1331rem !important; }
  .m-y-1511 { top: 1511rem !important; }

  /* the children carry their own cap trim on mobile, so the container must not */
  .meta-row { margin-top: 0; }
  .meta-row > p { top: var(--my) !important; }
  .meta-row .meta-m  { left: 16rem; }
  .meta-row .meta-zf { left: 151rem; }
  .meta-row .meta-eu { left: 16rem; }
  .meta-row .meta-ob { left: 151rem; }
  .m-raison { left: 86.4rem !important; top: 1654rem !important; }
  .meta-eu-alt { left: 16rem !important;  top: 187rem !important; }
  .meta-ob     { left: 151rem !important; top: 187rem !important; }
  .m-meta-m    { position: absolute; left: 16rem;  top: 150rem; }
  .m-meta-zf   { position: absolute; left: 151rem; top: 150rem; }
  .m-y-77 { top: 77rem !important; }

  /* ---------------------------------------------------- the flowed part -- */
  /* Everything from the first rule down is one column. Gaps are quoted from
     the design as baseline-to-cap distances and converted here: a margin runs
     between border boxes, so each one is the designed gap less the tail of
     the block above and the cap lead of the block below. */
  .sec { display: block; }
  .sec .rule,
  .sec .title-rig,
  .sec .sec-body,
  .sec .refs { position: static; }

  .sec .rule {
    left: 0;
    width: 100%;
    margin: 46.435rem 0 0;
    transform: none;
  }
  /* the canvas padding already places the first rule at 1711 */
  .sec:first-of-type .rule { margin-top: 0; }
  /* The runs are driven from script here exactly as they are on the wide
     canvas — they shrink from the two-row 50 setting against the right gutter
     to one 32 line at the left one, and stick under the nav for the length of
     the section. The rig itself stays in the flow as an empty two-row box so
     that nothing below it moves while the runs travel. */
  .sec .title-rig {
    position: relative;
    left: auto;
    margin: 18.25rem 0 0;
    margin-left: 0;
    height: 110rem;
    width: 361rem;
    font-family: "Millionaire", serif;
    font-size: 50rem;
    line-height: 1.1;
    letter-spacing: -2.5rem;
    white-space: nowrap;
  }
  .sec .title-rig .tw {
    position: absolute;          /* script switches to fixed while held */
    display: block;
    font-family: inherit;
    line-height: 1.1;
    will-change: auto;
  }
  /* One column means the held title sits over the copy, so it carries a band
     of the page ground with it and the body runs behind. Script sets the two
     numbers; when the rig is off screen it is hidden and so is the band. */
  .sec .title-rig::before {
    content: "";
    position: fixed;
    left: 0;
    top: var(--band-top, 0);
    width: 100%;
    height: var(--band-h, 0);
    background: var(--bg);
  }
  /* 50 more than the designed gap, so the copy only reaches the title once
     the title has finished collapsing onto one line */
  .sec .sec-body, .sec .refs {
    width: 361rem;
    margin: 80.18rem 0 0;
    top: auto;
    left: auto;
  }
  /* References holds at the top like the rest, but is already at its final
     size so there is nothing to morph — one row rather than two. */
  .sec-refs .title-rig {
    height: 35.2rem;
    margin-top: 17.44rem;
    font-size: 32rem;
    letter-spacing: 0;
  }
  .sec-refs .refs { margin-top: 85.49rem; }

  /* ------------------------------------------------------------ footer -- */
  .footer {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    margin-top: 100rem;
  }
  .footer .canvas { height: auto; min-height: 100vh; position: relative; }
  .footer .wordmark { top: 167rem; width: 148rem; height: 24rem; }
  .footer .hero-type { top: 220rem; }
  /* The lockup is centred between the last baseline of the statement (434)
     and the cap top of the colophon (790.18) — midpoint 612.1. */
  .footer .lockup .emblem { top: calc(50vh + 163.043rem); }
  .footer .lockup .zeus  { left: 130.69rem; top: calc(50vh + 178.6rem); }
  .footer .lockup .faber { left: 227.75rem; top: calc(50vh + 178.6rem); }
  .footer .hero-cols { display: none; }
  .footer .colophon { top: auto; bottom: 66rem; font-size: 16rem; transform: translate(-50%, 100%); }

  /* ---------------------------------------------------------- founders -- */
  .d-only { display: none !important; }
  .founder { display: block; }
  .founder .rule { position: static; left: auto; width: 100%; margin: 0; }
  .founder + .founder .rule { margin-top: 45.72rem; }
  .founder .founder-photo {
    position: static;
    margin: 19rem 0 0;
    width: 361rem;
    height: 300rem;
    left: auto !important;
    top: auto;
  }
  .founder .founder-meta {
    position: static;
    display: flow-root;        /* keep the name's cap-trim margin inside */
    margin: 19rem 0 0;
    width: 100% !important;
    left: auto !important;
    top: auto;
  }
  .founder .founder-meta .t-name { font-size: 24rem; margin-top: -10.14rem; }
  .founder .founder-meta .role { font-size: 12rem; }
  .founder .founder-bio {
    position: static;
    display: flow-root;
    width: 355rem !important;
    left: auto !important;
    top: auto;
    font-size: 12rem;
    margin: 16.065rem 0 0;
  }

  /* ---------------------------------------------------------------- 404 -- */
  .nf { position: relative; top: auto; padding-top: 1.93rem; }
  .nf .rule { position: absolute; left: 0; width: 100%; top: 0; margin: 0; }
  .nf .nf-copy { position: static; width: auto; font-size: 12rem; margin: 0; padding-top: 8rem; }

  /* -------------------------------------------------------- favourites -- */
  .favourite {
    position: relative;
    top: 0 !important;          /* the desktop y is an inline style */
    height: auto;
    margin: 0;
    padding-top: 1.93rem;       /* also stops the name's margin collapsing out */
    width: 100%;
  }
  .favourite + .favourite { margin-top: 26.07rem; }
  .favourite .rule { position: absolute; left: 0; width: 100%; top: 0; margin: 0; }
  .favourite .hit { left: 0; width: 100%; }
  .favourite .name {
    position: static;
    top: auto;
    left: auto;
    font-size: 12rem;
    margin: 0;
    padding-left: 8ch;
    text-indent: -8ch;
    white-space: pre-wrap;
    width: 260rem;
  }
  .favourite .cc {
    position: absolute;
    left: auto;
    right: 16rem;
    top: 7rem;
    font-size: 12rem;
    margin-top: -5.07rem;
  }
  .favourite .url { display: none; }
  /* ----------------------------------------------------------- data room --- */
  .doc {
    position: relative;
    top: 0 !important;          /* the desktop y is an inline style */
    height: auto;
    margin: 0;
    padding-top: 1.93rem;       /* also stops the name's margin collapsing out */
    width: 100%;
  }
  .doc + .doc { margin-top: 26.07rem; }
  .doc .rule { position: absolute; left: 0; width: 100%; top: 0; margin: 0; }
  .doc .hit { left: 0; width: 100%; }
  .doc .name {
    position: static;
    top: auto;
    left: auto;
    font-size: 12rem;
    margin: 0;
    padding-left: 8ch;
    text-indent: -8ch;
    white-space: pre-wrap;
    width: 260rem;
  }
  .doc .cc {
    position: absolute;
    left: auto;
    right: 16rem;
    top: 7rem;
    font-size: 12rem;
    margin-top: -5.07rem;
  }
  .doc .url { display: none; }
  .doc .blurb { position: static; width: auto; font-size: 11rem; line-height: 1.5; letter-spacing: -0.5rem; margin: 4rem 0 0; padding-left: 8ch; opacity: 0.62; }
  .dr-locked { position: relative; top: auto; padding-top: 1.93rem; }
  .dr-locked .rule { position: absolute; left: 0; width: 100%; top: 0; margin: 0; }
  .dr-locked .dr-copy { position: static; width: auto; font-size: 12rem; margin: 0; padding-top: 8rem; }
  .dr-lock { position: static; display: block; margin-top: 26rem; font-size: 12rem; }
  .dr-crumb { left: 16rem; top: 60rem; font-size: 12rem; }
  .dr-title { max-width: 361rem; white-space: normal; }
  .pdf-pages, .pdf-status { position: static; width: 100%; margin-top: 24rem; }
  .cipher .cipher-link { top: 19rem; }
  .m-arrow { display: inline; }
}

@media (min-width: 768px) {
  .m-only, .nav-menu, .nav-sheet, .col-mobile, .m-arrow { display: none; }
}