/* max-maclean.com
   ------------------------------------------------------------------
   The Readymag original renders a 1030px design canvas and scales it
   with the viewport. Every number below is the ORIGINAL design pixel
   value, multiplied by --u. So `calc(96 * var(--u))` is literally
   "96px on Max's Readymag canvas". That keeps the transcription
   readable and exact.

   Display face: Playfair Display (replaces Austin, licensed via Readymag).
   Crimson Text and Roboto Serif are unchanged from the original.
   ------------------------------------------------------------------ */

:root{
  --canvas:1030;
  --u:calc(100vw / 1030);
  --ground:#ffffff;
  --ink:#000000;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Crimson Text","Times New Roman",Times,serif;
  font-size:calc(13 * var(--u));
  line-height:1.046;   /* measured off the original: 13.6px pitch on 13px type */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;width:100%;height:100%;object-fit:contain}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- nav: fixed, floating, fully transparent behind ---------- */
.nav{
  position:fixed;top:calc(20 * var(--u));left:0;right:0;z-index:900;
  display:flex;justify-content:center;gap:calc(42 * var(--u));
  background:none;pointer-events:none;
}
/* On most pages the pills take the page's own ground and ink. Pages painted
   over a photograph set their own, because the page ground would vanish into
   the picture - hence the four variables rather than hard-coded values.
   Hovering fills with the ink at 80%, which is what the original does, and
   drops the rule to transparent rather than to zero width so the pill keeps
   its size. */
.nav a{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  width:calc(96 * var(--u));height:calc(30 * var(--u));
  font-size:calc(20 * var(--u));line-height:1;
  font-style:italic;font-weight:600;
  color:var(--nav-ink, var(--ink));
  border:calc(1.87 * var(--u)) solid var(--nav-ink, var(--ink));
  border-radius:999px;
  background:var(--nav-fill, var(--ground));
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nav a:hover,.nav a[aria-current="page"]{
  background:var(--nav-hover-fill, color-mix(in srgb, var(--nav-ink, var(--ink)) 80%, transparent));
  color:var(--nav-hover-ink, var(--nav-fill, var(--ground)));
  border-color:transparent;
}

/* ---------- the page canvas ---------- */
.canvas{
  position:relative;
  width:100%;
  height:calc((var(--canvasH) + 140) * var(--u));
}
.at{position:absolute}
.media-item picture{display:block;width:100%;height:100%}
.media-item .frame{position:absolute;inset:0;overflow:hidden;display:block}
.media-item .frame picture{position:static}

/* ---------- project index ---------- */
/* ONE grid for all twelve, so the two rows share columns and everything lines
   up vertically. Columns size to their content and space-between spreads the
   slack evenly, which keeps the gaps even instead of pooling in the middle.
   Where a row's item is narrower than its column, the left half sits to the
   left of the column and the right half to the right. */
.index{
  position:absolute;left:calc(77 * var(--u));right:calc(78 * var(--u));
  display:grid;grid-template-columns:repeat(6,auto);
  justify-content:space-between;align-items:baseline;
  row-gap:calc(16.5 * var(--u));
}
.index > *:nth-child(6n+1),.index > *:nth-child(6n+2),.index > *:nth-child(6n+3){justify-self:start}
.index > *:nth-child(6n+4),.index > *:nth-child(6n+5),.index > *:nth-child(6n+0){justify-self:end}
.index a{
  font-size:calc(14 * var(--u));line-height:1;white-space:nowrap;
  padding-bottom:calc(3 * var(--u));
  border-bottom:calc(1.4 * var(--u)) solid transparent;
}
.index a:hover,.index a[aria-current="page"]{border-bottom-color:currentColor}
.mindex{display:none}

/* Tactical Ads is a category, not a page: it opens onto four campaigns */
.has-sub{position:relative}
.sub-toggle{
  font:inherit;font-size:calc(14 * var(--u));line-height:1;
  color:inherit;background:none;border:0;padding:0 0 calc(3 * var(--u));
  border-bottom:calc(1.4 * var(--u)) solid transparent;
  cursor:pointer;display:inline-flex;align-items:baseline;gap:calc(6 * var(--u));
}
.sub-toggle:hover,.has-sub[data-open="true"] .sub-toggle,
.sub-toggle[aria-current="page"]{border-bottom-color:currentColor}
.caret{
  width:0;height:0;align-self:center;
  border-left:calc(3.4 * var(--u)) solid transparent;
  border-right:calc(3.4 * var(--u)) solid transparent;
  border-top:calc(4.2 * var(--u)) solid currentColor;
  transition:transform .18s ease;
}
.has-sub[data-open="true"] .caret{transform:rotate(180deg)}
.sub{
  position:absolute;left:calc(-14 * var(--u));top:calc(100% + 10 * var(--u));
  z-index:400;display:grid;gap:calc(10 * var(--u));
  padding:calc(13 * var(--u)) calc(16 * var(--u));
  background:var(--ground);
  border:calc(1.4 * var(--u)) solid currentColor;
  border-radius:calc(10 * var(--u));
  opacity:0;visibility:hidden;transform:translateY(calc(-4 * var(--u)));
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  white-space:nowrap;
}
.has-sub[data-open="true"] .sub{opacity:1;visibility:visible;transform:none}
.sub a{
  font-size:calc(14 * var(--u));line-height:1;
  border-bottom:calc(1.4 * var(--u)) solid transparent;
  padding-bottom:calc(2 * var(--u));
}
.sub a:hover{border-bottom-color:currentColor}

/* ---------- text blocks ---------- */
.eyebrow{font-size:calc(15 * var(--u));line-height:1.15;margin:0 0 calc(4 * var(--u))}
.title{
  font-family:"Playfair Display","Times New Roman",Times,serif;
  /* Readymag fits each page's title to its own box, so the size varies per
     page; --title-size carries it, 40 is the house default */
  font-weight:400;font-size:calc(var(--title-size, 40) * var(--u));
  line-height:var(--title-lead, 1);
  margin:0;text-wrap:balance;
}
/* Readymag sets body copy solid - line-height exactly equal to the font size -
   on every project page, and the paragraph gap is one blank line of the same
   measure. Reproducing that is what makes a copy block end where the original's
   ends, which matters when an image is layered over the bottom of it. */
.copy p,.note p{margin:0 0 calc(13 * var(--u));line-height:1}
.copy,.note{text-wrap:pretty}
.copy p:last-child,.note p:last-child{margin-bottom:0}

/* ---------- credits + footer ---------- */
.credits{
  font-size:calc(15 * var(--u));line-height:1;
  display:flex;justify-content:space-between;align-items:baseline;
}
.credits span:last-child{text-align:right}
.rule{height:calc(2 * var(--u));background:currentColor}
.foot{
  position:absolute;left:calc(77 * var(--u));right:calc(78 * var(--u));
  display:flex;justify-content:space-between;align-items:center;
  font-family:"Roboto Serif","Times New Roman",Times,serif;
  font-weight:200;font-size:calc(13 * var(--u));line-height:1;
}
.foot .mid{text-align:center}
.foot .end{text-align:right}
.foot a:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- below tablet: abandon the canvas, stack in reading order ---------- */
/* ==================================================================
   PHONE / TABLET
   Readymag runs a separate mobile canvas. Measured off Max's iPhone
   screenshot of the original: 430 design units wide, 27 unit margins,
   so the content column is 376. Every number below is one of those
   units, multiplied by --u. Capped at 1.4 so tablets don't balloon.
   ================================================================== */
@media (max-width:1023px){
  :root{--u:min(calc(100vw / 430), 1.4px)}

  body{
    font-size:calc(20 * var(--u));
    line-height:1.0;
  }
  .index{display:none}
  .mindex{display:block}

  /* pills float on the ground — no bar. Outer edges meet the rules. */
  .nav{
    position:sticky;top:0;z-index:900;
    background:none;border:0;
    padding:calc(16 * var(--u)) 0 calc(12 * var(--u));
    display:flex;justify-content:space-between;gap:0;
    width:calc(376 * var(--u));margin:0 auto;
  }
  .nav a{
    width:calc(107 * var(--u));height:calc(32.7 * var(--u));
    font-size:calc(22 * var(--u));line-height:1;
    border-width:calc(2.8 * var(--u));border-radius:999px;
    background:var(--ground);   /* so content passes behind, not through */
    display:flex;align-items:center;justify-content:center;
  }

  .canvas{
    height:auto!important;
    width:calc(376 * var(--u));margin:0 auto;padding:0 0 calc(60 * var(--u));
    display:flex;flex-direction:column;
  }
  .at{position:static!important;width:auto!important;height:auto!important;
      left:auto!important;top:auto!important;order:var(--flow,50)}

  /* --- project index: 3 rows of 4, ruled top and bottom --- */
  .mindex{order:0;margin:calc(28 * var(--u)) 0 0}
  .mrule{height:calc(1.4 * var(--u));background:currentColor}
  .mgrid{
    display:grid;grid-template-columns:repeat(4,auto);
    justify-content:space-between;align-items:baseline;
    row-gap:calc(21.5 * var(--u));
    font-size:calc(16 * var(--u));line-height:1;
  }
  .mgrid > *:nth-child(4n+1),.mgrid > *:nth-child(4n+2){justify-self:start}
  .mgrid > *:nth-child(4n+3),.mgrid > *:nth-child(4n+0){justify-self:end}
  /* .mrule and .mrow are both divs, so :first-of-type matches the rule.
     Use adjacent-sibling selectors instead. */
  .mrule + .mgrid{margin-top:calc(21 * var(--u))}
  .mgrid + .mrule{margin-top:calc(26 * var(--u))}
  .mgrid a,.mgrid .sub-toggle{
    font-size:calc(16 * var(--u));line-height:1;white-space:nowrap;
    padding:0 0 calc(3 * var(--u));border:0;
    border-bottom:calc(1.4 * var(--u)) solid transparent;background:none;
  }
  .mgrid a[aria-current="page"],.mgrid .sub-toggle[aria-current="page"]{
    border-bottom-color:currentColor;
    box-shadow:0 calc(4 * var(--u)) 0 calc(-2.6 * var(--u)) currentColor;
  }
  .mgrid .has-sub{position:relative}
  .mgrid .caret{display:none}
  .mindex .sub{
    left:0;top:calc(100% + 9 * var(--u));
    padding:calc(13 * var(--u)) calc(15 * var(--u));gap:calc(11 * var(--u));
    border-width:calc(1.6 * var(--u));border-radius:calc(12 * var(--u));
  }
  .mindex .sub a{font-size:calc(17 * var(--u));border:0;padding:0}

  /* --- text --- */
  .eyebrow{font-size:calc(16 * var(--u));line-height:1;margin:calc(45 * var(--u)) 0 0}
  .title{font-size:calc(44 * var(--u));line-height:1;margin:calc(9 * var(--u)) 0 0}
  .copy{margin-top:calc(30 * var(--u))}
  .copy p,.note p{margin:0 0 calc(20 * var(--u));max-width:none}
  .copy p:last-child,.note p:last-child{margin-bottom:0}
  .note{font-size:calc(20 * var(--u))!important;margin-top:calc(34 * var(--u));
        padding-top:calc(18 * var(--u));border-top:calc(1.4 * var(--u)) solid currentColor}

  /* --- assets: full column, natural height --- */
  .media-item{width:100%!important;margin-top:calc(34 * var(--u))}
  .media-item picture,.media-item img{height:auto!important;width:100%}
  .media-item .frame{position:relative;inset:auto;height:auto}
  .media-item .frame img{position:static!important;width:100%!important;height:auto!important;
                          left:auto!important;top:auto!important}
  img{height:auto}

  .credits{font-size:calc(16 * var(--u));line-height:1.5;margin-top:calc(26 * var(--u))}
  .credits + .credits{margin-top:0}
  .rule{height:calc(1.4 * var(--u));margin:calc(30 * var(--u)) 0 0}
  .foot{flex-direction:column;align-items:flex-start;gap:calc(7 * var(--u));
        font-size:calc(16 * var(--u));margin-top:calc(24 * var(--u))}
  .foot .mid,.foot .end{text-align:left}
}

@media (max-width:1023px){
  .media-item.is-hero{order:2}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==================================================================
   FLOWING DOCUMENT PAGES (Me, Contact)
   Same 1030 canvas and 77–952 spine as the project pages, but laid
   out as a document so content length can change freely.
   ================================================================== */
body.doc{background:var(--ground)}

/* Document-page type scale. Every number is a Readymag design unit measured off
   the original /me/ page; build.mjs overrides these per page from
   content/typography/<slug>.json, which is what the admin panel edits. */
body.doc{
  --sheet:912;
  --intro-size:15;   --intro-lead:1;     --intro-width:488;  --intro-top:34;
  --head-size:20;    --head-rule:30;     --head-after:48;    --sec-gap:39;
  --cv-size:19;      --cv-lead:1;        --cv-gap:40;        --cv-dates:150;
  --q-size:15;       --q-lead:1;         --q-width:488;      --q-gap:56;  --q-attrib:20;
  --clients-gap:0;   --clients-col-gap:0;
  --name-size:15;    --name-lead:1.03;
  --role-size:13;    --role-lead:1;
}

.sheet,.sheet-foot{
  width:calc(var(--sheet) * var(--u));margin:0 auto;
}
.sheet{padding-top:calc(112 * var(--u))}

.portrait{
  display:block;width:calc(371 * var(--u));margin:0 auto;height:auto;
  border-radius:calc(46 * var(--u));
}
.intro{
  width:calc(var(--intro-width) * var(--u));
  margin:calc(var(--intro-top) * var(--u)) auto 0;
  text-align:center;
  font-size:calc(var(--intro-size) * var(--u));
  line-height:var(--intro-lead);
}
a.ul{border-bottom:calc(1.2 * var(--u)) solid currentColor;padding-bottom:calc(1 * var(--u))}

.sec{margin-top:calc(var(--sec-gap) * var(--u))}
.sec h2{
  font-family:"Playfair Display","Times New Roman",serif;
  font-style:italic;font-weight:500;
  font-size:calc(var(--head-size) * var(--u));line-height:1;
  /* the rule sits --head-rule below the top of the heading, so the margin is
     whatever is left once the heading's own line box is taken off */
  margin:0 0 calc((var(--head-rule) - var(--head-size)) * var(--u));
}
.sec-rule{
  height:calc(2 * var(--u));background:currentColor;
  margin-bottom:calc(var(--head-after) * var(--u));
}

/* --- CV ---
   The number is pinned to the left spine and the dates to the right, so the
   role and company centre on the FULL content width rather than on whatever
   space is left between them. That is how the original sits. */
ol.cv{list-style:none;margin:0;padding:0}
ol.cv li{
  position:relative;text-align:center;
  font-size:calc(var(--cv-size) * var(--u));
  line-height:var(--cv-lead);
}
ol.cv li + li{margin-top:calc(var(--cv-gap) * var(--u))}
ol.cv .n{position:absolute;left:0;top:0;font-variant-numeric:tabular-nums}
ol.cv .d{
  position:absolute;right:0;top:0;
  width:calc(var(--cv-dates) * var(--u));
  text-align:right;font-variant-numeric:tabular-nums;
}
ol.cv .r{display:block}
ol.cv .r b{display:block;font-weight:400}
ol.cv .r i{display:block;font-style:italic}

/* --- logo rows --- */
ul.awards,ul.clients{list-style:none;margin:0;padding:0;display:grid;align-items:center}
ul.awards{grid-template-columns:repeat(5,1fr);gap:calc(30 * var(--u)) calc(24 * var(--u))}
ul.awards img{width:100%;height:calc(64 * var(--u));object-fit:contain;object-position:center}
/* Each client file is a 2x2 block of four logos, exactly as Max assembled them
   in Readymag. Two blocks sit side by side and fill the content width, so the
   page reads as four columns. The blocks carry their own whitespace, which is
   what sets the vertical rhythm — hence no gap by default. */
ul.clients{grid-template-columns:repeat(2,1fr);
  gap:calc(var(--clients-gap) * var(--u)) calc(var(--clients-col-gap) * var(--u))}
/* aspect-ratio, not height:auto — the images are lazy-loaded, so without a
   reserved box the row collapses to zero and the loader never fires */
ul.clients img{width:100%;height:auto;aspect-ratio:851 / 315;object-fit:contain;display:block}

/* --- testimonials --- */
.sec figure{margin:0;text-align:center}
.sec figure + figure{margin-top:calc(var(--q-gap) * var(--u))}
.sec blockquote{
  margin:0 auto;width:calc(var(--q-width) * var(--u));
  font-size:calc(var(--q-size) * var(--u));
  line-height:var(--q-lead);
  text-align:center;
}
.sec figcaption{
  display:block;text-align:center;
  margin-top:calc(var(--q-attrib) * var(--u));
}
.sec figcaption b{
  display:block;font-weight:400;text-transform:uppercase;letter-spacing:.013em;
  font-size:calc(var(--name-size) * var(--u));line-height:var(--name-lead);
}
.sec figcaption span{
  display:block;font-style:italic;
  font-size:calc(var(--role-size) * var(--u));line-height:var(--role-lead);
}

/* --- document footer --- */
.sheet-foot{margin-top:calc(72 * var(--u));padding-bottom:calc(60 * var(--u))}
.sheet-foot .rule{position:static;height:calc(2 * var(--u));background:currentColor}
.foot-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:calc(30 * var(--u));
  font-family:"Roboto Serif","Times New Roman",serif;font-weight:200;
  font-size:calc(13 * var(--u));line-height:1;
}
.foot-row .end{text-align:right}
.foot-row a:hover{text-decoration:underline;text-underline-offset:.25em}

@media (max-width:1023px){
  body.doc{
    --sheet:376;
    --intro-size:19;  --intro-lead:1.16;  --intro-width:376; --intro-top:30;
    --head-size:30;   --head-rule:38;     --head-after:26;   --sec-gap:46;
    --cv-size:17;     --cv-lead:1.15;     --cv-gap:26;       --cv-dates:96;
    --q-size:18;      --q-lead:1.18;      --q-width:376;     --q-gap:38;  --q-attrib:16;
    --clients-gap:0;  --clients-col-gap:0;
    --name-size:15;   --name-lead:1.1;
    --role-size:13.5; --role-lead:1.1;
  }
  .sheet{padding-top:calc(28 * var(--u))}
  .portrait{width:100%;border-radius:calc(28 * var(--u))}
  /* the phone column is too narrow to hold a centred role between a number and
     a date, so the row unstacks: number left, dates right, role centred under */
  ol.cv li{padding-top:calc(var(--cv-size) * var(--u) * var(--cv-lead))}
  ol.cv .n,ol.cv .d{top:0}
  ul.awards{grid-template-columns:repeat(3,1fr);gap:calc(24 * var(--u)) calc(18 * var(--u))}
  ul.awards img{height:calc(56 * var(--u))}
  /* one block per row on a phone, so each logo keeps a readable size */
  ul.clients{grid-template-columns:1fr}
  .foot-row{flex-direction:column;align-items:flex-start;gap:calc(7 * var(--u));
            font-size:calc(16 * var(--u))}
  .foot-row .end{text-align:left}
}

/* ---------- Contact ----------
   A single-screen composition. Every number is a design unit measured off the
   original page and carried by a custom property, so the admin panel can tune
   it the same way it tunes /me/. */
body.contact{
  --c-height:380;
  --c-intro-size:14;  --c-intro-lead:1;  --c-intro-width:345; --c-intro-y:136;
  --c-head-size:80;   --c-head-y:198;    --c-head-width:302;  --c-head-pitch:64.5;
  --c-list-x:363;     --c-list-y:141;    --c-list-gap:60;
  --c-icon:29;        --c-icon-dy:-8;    --c-label-x:407;
  --c-label-size:15;  --c-label-lead:1;  --c-label-width:150;
  --c-media-x:587;    --c-media-y:121;   --c-media-w:326;     --c-media-h:237;
}
/* a single-screen page: the footer sits at the bottom of the window rather than
   floating just under the composition, which is how the original reads */
body.contact{min-height:100vh;display:flex;flex-direction:column}
body.contact .sheet-foot{margin-top:auto}
.c-stage{position:relative;height:calc(var(--c-height) * var(--u));padding-top:0}
.c-stage > *{position:absolute;margin:0}

.c-intro{
  left:0;top:calc(var(--c-intro-y) * var(--u));
  width:calc(var(--c-intro-width) * var(--u));
  font-size:calc(var(--c-intro-size) * var(--u));
  line-height:var(--c-intro-lead);
}
/* Both lines of the headline are set to exactly the same measure on the
   original — Readymag fits text to its box, so "Let's work" sets at 81 and
   "Together" at 92. site.js reproduces that by sizing each line to
   --c-head-width; --c-head-size is the fallback if the script never runs. */
.c-head{
  left:0;top:calc(var(--c-head-y) * var(--u));
  width:calc(var(--c-head-width) * var(--u));
  font-family:"Playfair Display","Times New Roman",serif;
  font-weight:400;font-style:normal;
  font-size:calc(var(--c-head-size) * var(--u));
  letter-spacing:-.005em;
}
.c-head .c-line{
  display:block;white-space:nowrap;
  line-height:calc(var(--c-head-pitch) * var(--u));
}
.c-list{
  list-style:none;padding:0;
  left:calc(var(--c-list-x) * var(--u));top:calc(var(--c-list-y) * var(--u));
}
.c-list li{height:calc(var(--c-list-gap) * var(--u))}
.c-list a,.c-list li > span{display:block}
.c-list a{color:inherit;text-decoration:none}
.c-list li{position:relative}
.c-ico{
  /* --c-list-y is the label's top; the icon rides slightly above it so the two
     optically centre on each other, which is how the original sits */
  position:absolute;left:0;top:calc(var(--c-icon-dy) * var(--u));
  width:calc(var(--c-icon) * var(--u));height:calc(var(--c-icon) * var(--u));
}
.c-label{
  display:block;
  margin-left:calc((var(--c-label-x) - var(--c-list-x)) * var(--u));
  font-size:calc(var(--c-label-size) * var(--u));
  line-height:var(--c-label-lead);
  width:calc(var(--c-label-width) * var(--u));
}
.c-list a:hover .c-label{text-decoration:underline;text-underline-offset:.25em}
.c-media{
  left:calc(var(--c-media-x) * var(--u));top:calc(var(--c-media-y) * var(--u));
  width:calc(var(--c-media-w) * var(--u));height:calc(var(--c-media-h) * var(--u));
  /* the original stretches the still ~15% wider than the source, so fill,
     not contain — contain would letterbox it and shift the set left */
  object-fit:fill;
}

@media (max-width:1023px){
  /* the composition can't hold three columns on a phone, so it unstacks */
  body.contact{
    --c-intro-size:19; --c-intro-lead:1.16;
    /* the lines are fitted to the column, so the pitch has to scale with it:
       the desktop ratio is 64.5 / 302 */
    --c-head-size:80;  --c-head-width:376; --c-head-pitch:80;
    --c-icon:34;       --c-icon-dy:-8;    --c-label-size:19;
    --c-list-gap:52;   --c-label-width:300;
  }
  .c-stage{height:auto;padding-top:calc(24 * var(--u))}
  .c-stage > *{position:static}
  .c-intro{width:100%}
  .c-head{margin-top:calc(26 * var(--u))}
  .c-list{margin-top:calc(40 * var(--u))}
  .c-label{margin-left:calc(48 * var(--u))}
  .c-ico{position:absolute}
  .c-media{
    display:block;width:100%;height:auto;object-fit:contain;
    margin-top:calc(40 * var(--u));
  }
}

/* ---------- home grid ----------
   Eight objects free-placed on the canvas with a numbered caption under each.
   The columns are deliberately unevenly spaced — that is the original, not a
   grid gone wrong. Each object is CONTAINED at its natural aspect: Readymag
   reports object-fit:cover, but probing the real rendered boxes shows contain,
   and cover clips the pill bottle in a way the original does not. */
.intro-spiel{margin:0}
.tile{
  position:static;                 /* so the spans lay out against .canvas */
  color:inherit;text-decoration:none;
}
.tile-obj{display:block}
.tile-obj img,.tile-obj picture{width:100%;height:100%;display:block;object-fit:contain}
.tile-num{
  font-size:calc(var(--cap-size) * var(--u));line-height:1;white-space:nowrap;
  border-bottom:calc(1.2 * var(--u)) solid transparent;
  padding-bottom:calc(2 * var(--u));
  transition:border-color .18s ease;
}
/* one gesture, two parts: the object lifts, the number underlines */
.tile-obj{transition:transform .18s ease}
.tile:hover .tile-obj{transform:translateY(calc(-4 * var(--u)))}
.tile:hover .tile-num,.tile:focus-visible .tile-num{border-bottom-color:currentColor}

@media (max-width:1023px){
  /* two up on a phone: the wrapper is the grid item, so each object keeps its
     own number underneath it */
  body.home .canvas{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:calc(22 * var(--u));row-gap:calc(34 * var(--u));
    align-items:end;
    /* clear the fixed nav pills, which the first row otherwise runs into */
    padding-top:calc(34 * var(--u));
  }
  .tile{
    order:var(--flow,50);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  }
  .tile-obj{
    display:flex;align-items:flex-end;justify-content:center;
    height:calc(150 * var(--u))!important;width:100%!important;
  }
  .tile-obj img,.tile-obj picture{
    width:auto!important;height:auto!important;
    max-width:100%;max-height:calc(150 * var(--u));
  }
  .tile-num{margin-top:calc(13 * var(--u));font-size:calc(15 * var(--u))}
  .intro-spiel{
    grid-column:1 / -1;width:auto!important;
    font-size:calc(20 * var(--u))!important;line-height:1.22!important;
    margin-bottom:calc(6 * var(--u));
  }
  body.home .rule,body.home .foot{grid-column:1 / -1}
  body.home .rule{margin-top:calc(20 * var(--u))}
}

/* ---------- 404 ---------- */
body.gone{min-height:100vh;display:flex;flex-direction:column}
body.gone .sheet-foot{margin-top:auto}
.miss{padding-top:calc(200 * var(--u));text-align:center}
.miss-num{font-size:calc(13 * var(--u));line-height:1;margin:0}
.miss-head{
  font-family:"Playfair Display","Times New Roman",serif;
  font-weight:400;font-size:calc(78 * var(--u));line-height:1;
  margin:calc(22 * var(--u)) 0 0;
}
.miss-copy{
  font-size:calc(15 * var(--u));line-height:1.2;
  margin:calc(26 * var(--u)) 0 0;
}
.miss-copy a{border-bottom:calc(1.2 * var(--u)) solid currentColor;padding-bottom:calc(1 * var(--u))}
@media (max-width:1023px){
  .miss{padding-top:calc(120 * var(--u))}
  .miss-head{font-size:calc(56 * var(--u))}
  .miss-copy{font-size:calc(19 * var(--u))}
}

/* ---------- optional per-page text transform ---------- */
.tt-capitalize{text-transform:capitalize}
.tt-uppercase{text-transform:uppercase}

/* ---------- video embeds ---------- */
.embed{overflow:hidden}
.embed iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:1023px){
  .embed{width:100%!important;aspect-ratio:16 / 9;height:auto!important;
         margin-top:calc(34 * var(--u))}
}

/* ---------- full-bleed page background ---------- */
/* Readymag paints some pages on a photograph rather than a flat colour. It sits
   behind everything, covers the viewport and stays put while the canvas scrolls. */
.page-bg{
  position:fixed;inset:0;z-index:-1;
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;
}

/* ---------- extra positioned text: pull quotes, captions ---------- */
.block{margin:0}
.block p{margin:0}
.media-item{transform:rotate(var(--rot, 0deg))}
@media (max-width:1023px){
  /* the canvas is abandoned on a phone; a rotated object would break the column */
  .media-item{transform:none}
  .block{font-size:calc(20 * var(--u))}
  .block p{font-size:inherit!important;line-height:1.2!important}
}