/* 08 Left airport pages. Colours and type are the live theme's (.olp tokens in
   sections/08l-product.liquid): ink, dim, faint, line, accent; Proxima + Orator. */
@font-face{ font-family:"OratorStd"; src:url("https://cdn.shopify.com/s/files/1/0789/2895/files/OratorStd.woff?v=1784761826") format("woff"); font-display:swap; }
/* every face comes from the 08 Left Adobe font kit (kla8lae): proxima-nova, futura-pt, bebas-neue.
   BN Bobbie Sans is never loaded: the card code is a drawn shape (see build-data.py). */

:root{
  --ap-ink:#12120f; --ap-dim:#54574f; --ap-faint:#8a8d84; --ap-line:#e5e3d9; --ap-accent:#f9cb0c;
  --ap-bg:#ffffff; --ap-stage:#f1f0eb;
  --ap-sans:"proxima-nova","Proxima Nova",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ap-orator:"OratorStd","Orator Std",ui-monospace,Menlo,monospace;
  --ap-gutter:clamp(20px,5vw,72px);
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
/* an airport with no runway diagram: the code and lines take the whole hero */
.ap-hero:has(.ap-hero__rig[hidden]){ grid-template-columns:1fr; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ap-bg); color:var(--ap-ink); font-family:var(--ap-sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; }
h1,h2,p,ul,figure{ margin:0; padding:0; }

.ap-wrap{ max-width:1240px; margin:0 auto; padding:0 var(--ap-gutter); }
.ap-eyebrow{ font-family:var(--ap-orator); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ap-faint); }
.ap-h2{ font-weight:400; font-size:clamp(20px,2.1vw,28px); line-height:1.15; letter-spacing:-.01em; margin-top:12px; max-width:24ch; }

/* preview only */
.ap-preview{ display:flex; gap:16px; align-items:center; justify-content:center; padding:7px 12px; background:var(--ap-ink); color:#fff;
  font-family:var(--ap-orator); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.ap-preview span{ opacity:.55; }
.ap-preview a{ text-decoration:none; opacity:.7; }
.ap-preview a.is-on{ opacity:1; color:var(--ap-accent); }

.ap-top{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:26px var(--ap-gutter) 0;
  font-family:var(--ap-orator); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.ap-top__mark{ text-decoration:none; font-weight:700; }
.ap-top__for{ color:var(--ap-faint); text-align:right; }

/* hero */
.ap-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(24px,5vw,80px);
  min-height:min(72vh,720px); padding:clamp(40px,7vh,90px) var(--ap-gutter) clamp(32px,5vh,64px); max-width:1384px; margin:0 auto; }
.ap-hero__h{ font-weight:inherit; }
.ap-flaps{ display:flex; gap:.02em; perspective:800px; font-weight:700; font-size:clamp(96px,21vw,300px); line-height:.86; letter-spacing:.01em;
  margin-left:-.05em; }
.ap-flap{ display:inline-block; min-width:.6em; text-align:center; transform-origin:center; backface-visibility:hidden; }
@keyframes apFlap{ 0%{ transform:rotateX(0) } 45%{ transform:rotateX(-90deg); opacity:.2 } 55%{ transform:rotateX(90deg); opacity:.2 } 100%{ transform:rotateX(0); opacity:1 } }
.ap-hero__fans{ display:block; margin-top:clamp(20px,2.4vw,34px); font-weight:400; font-size:15px; line-height:1.5; letter-spacing:0; }
.ap-hero__line{ margin-top:2px; font-size:15px; line-height:1.5; color:var(--ap-dim); max-width:44ch; }
.ap-hero__rig{ justify-self:end; width:min(100%,420px); color:var(--ap-ink); }
.ap-hero__rig > div{ aspect-ratio:1/1; }
.ap-hero__rig svg{ width:100%; height:100%; overflow:visible; display:block; }
.ap-hero__rig path{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:butt; stroke-dasharray:1; stroke-dashoffset:0; }
.ap-hero__rig figcaption{ margin-top:22px; font-family:var(--ap-orator); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ap-faint); }

/* featured in: the site's own strip (a JPG on white, so multiply drops the white) */
.ap-feat{ max-width:1384px; margin:0 auto; padding:0 var(--ap-gutter) clamp(56px,8vw,104px); }
.ap-feat picture{ display:block; margin-top:22px; }
.ap-feat__img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; opacity:.9; }

/* the card */
.ap-stage{ background:linear-gradient(180deg,var(--ap-stage) 0%,var(--ap-stage) 55%,#e9e7e0 100%); padding:clamp(64px,9vw,128px) 0 clamp(64px,9vw,120px); }
.ap-stage .ap-eyebrow{ font-size:24px; color:var(--ap-ink); }
.ap-stage__note{ margin-top:12px; font-size:15px; line-height:1.5; color:var(--ap-dim); max-width:44ch; }
.ap-stage__after{ margin-top:clamp(28px,3.6vw,48px); text-align:center; font-size:15px; line-height:1.5; color:var(--ap-dim); }
.ap-card{ max-width:900px; margin:clamp(44px,6vw,88px) auto 0; }
.ap-card + .ap-card{ margin-top:clamp(72px,10vw,150px); }
.ap-card figcaption{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px clamp(20px,4vw,48px); margin-top:clamp(28px,3.6vw,48px);
  font-family:var(--ap-orator); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ap-faint); }
.ap-card figcaption b{ color:var(--ap-ink); font-weight:400; margin-right:.6em; }

.apc{ perspective:1500px; touch-action:pan-y; }
.apc__tilt{ position:relative; will-change:transform; transform-style:preserve-3d; }
.apc__face{ position:relative; width:100%; height:100%; background:#faf9f5; border-radius:1.5px;
  box-shadow:0 1px 1px rgba(18,18,15,.10), 0 2px 0 -1px #dcdad2,
    var(--apc-shx,0px) 26px 50px -22px rgba(18,18,15,.30), var(--apc-shx,0px) 8px 16px -10px rgba(18,18,15,.14); }
.apc__face canvas{ display:block; width:100%; height:100%; border-radius:inherit; }
/* the side of the card turned away from the light falls off a little */
.apc__shade{ position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, rgba(18,18,15,var(--apc-sl,0)), transparent 62%),
             linear-gradient(270deg, rgba(18,18,15,var(--apc-sr,0)), transparent 62%); }
/* folded: the back panel lies flat and carries the ground shadow; the front lifts off it, hinged along the top */
.apc--folded .apc__back{ position:absolute; inset:0; border-radius:1.5px;
  background:linear-gradient(180deg,#f6f5f0 0%,#e9e7e0 100%);
  box-shadow:0 1px 1px rgba(18,18,15,.10), 0 2px 0 -1px #d6d3ca,
    var(--apc-shx,0px) 26px 50px -22px rgba(18,18,15,.30), var(--apc-shx,0px) 8px 16px -10px rgba(18,18,15,.14); }
.apc--folded{ perspective:2600px; }
.apc--folded .apc__face{ transform-origin:50% 0; transform:rotateX(10deg);
  box-shadow:0 1px 1px rgba(18,18,15,.10), var(--apc-shx,0px) 16px 22px -12px rgba(18,18,15,.34); }
/* die cut: clip-path would cut a box-shadow off, so the shadow comes from a filter that follows the outline */
.apc--cut .apc__tilt{ transform-style:flat;
  filter:drop-shadow(0 1px 1px rgba(18,18,15,.16)) drop-shadow(var(--apc-shx,0px) 20px 22px rgba(18,18,15,.20)); }
.apc--cut .apc__face{ background:none; box-shadow:none; border-radius:0; }

/* tent: the card stands on the table and turns; panels hang from the fold at the top edge */
.apc--tent{ perspective:2400px; padding:6% 0 14%; }
.apc--tent .apc__tilt{ transform-style:preserve-3d; }
.apc__panel{ position:absolute; left:0; right:0; height:100%; transform-style:preserve-3d; }
.apc__panel--front{ top:0; transform-origin:50% 0; }
.apc__panel--back{ top:-100%; transform-origin:50% 100%; }
.apc__side{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.apc__side--out{ background:#faf9f5; }
.apc__side--out canvas{ display:block; width:100%; height:100%; }
/* inside of the fold: plain paper in its own shadow */
.apc__side--in{ background:linear-gradient(180deg,#dcd9d1,#ebe9e3); transform:rotateY(180deg); }
.apc__panel--front .apc__side--out{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.apc__ground{ position:absolute; left:-4%; right:-4%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(18,18,15,.30), rgba(18,18,15,.12) 60%, transparent); }
.ap-card--tent{ max-width:720px; }

/* and more: small mockups of other pieces, each wearing the airport's own 08 Left art */
.ap-more{ margin-top:clamp(80px,11vw,150px); }
/* the four pieces in one row, a little smaller than the cards above */
.ap-more__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,3vw,44px) clamp(10px,2vw,28px); margin:clamp(24px,3vw,40px) auto 0; max-width:1040px; }
.apx{ margin:0; flex:0 1 calc(25% - 21px); min-width:0; }
.apx figcaption{ margin-top:10px; text-align:center; font-family:var(--ap-orator); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ap-dim); }
.apx-view{ position:relative; aspect-ratio:1/1; perspective:1100px; }
.apx-stage{ position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; --apx-x:-14deg;
  transform:scale(var(--apx-k,1)) rotateX(var(--apx-x)) rotateY(-22deg); animation:apxSway 7s ease-in-out infinite alternate; }
.apx-stage--flat{ --apx-x:-52deg; }
/* coasters: a low-angle stack (board discs one pixel apart make the edge) and one standing coaster */
.apx-stage--stack{ animation:none; transform:scale(var(--apx-k,1)) rotateX(-30deg); }
.apx-stack, .apx-stack__one{ position:absolute; transform-style:preserve-3d; }
.apx-disc{ position:absolute; width:150px; height:150px; left:-75px; top:-75px; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px, #ece8df; }
.apx-disc--seam{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px, #dad5ca; }
.apx-disc--face{ background:#f6f4ee no-repeat 50% 50% / 100% 100%; box-shadow:inset 0 0 0 1px rgba(18,18,15,.05); }
/* board texture over the printed face */
.apx-disc--face::after{ content:""; position:absolute; inset:0; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px; mix-blend-mode:multiply; opacity:.5; }
.apx-board{ position:absolute; width:47%; right:7%; bottom:9%; z-index:2; transform-origin:50% 100%; transform:perspective(900px) rotateX(11deg); }
.apx-board .apc__tilt{ filter:drop-shadow(0 .8px 0 #d6d2c7) drop-shadow(0 .8px 0 #cbc6ba)
  drop-shadow(calc(var(--apc-shx,0px) * .6) 10px 8px rgba(18,18,15,.24)); }
.apx-board .apc__face::after{ content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px; mix-blend-mode:multiply; opacity:.45; }
.apx-board__shadow{ position:absolute; right:6%; width:48%; bottom:6.5%; height:6%; border-radius:50%; z-index:1;
  background:radial-gradient(closest-side, rgba(18,18,15,.30), transparent); }
.apx-stage--spin{ --apx-x:-20deg; animation:apxSpin 18s linear infinite; }
.apx-stage--still{ animation:none; transform:scale(var(--apx-k,1)); }
@keyframes apxSway{ from{ transform:scale(var(--apx-k,1)) rotateX(var(--apx-x)) rotateY(-24deg) } to{ transform:scale(var(--apx-k,1)) rotateX(var(--apx-x)) rotateY(24deg) } }
@keyframes apxSpin{ from{ transform:scale(var(--apx-k,1)) rotateX(var(--apx-x)) rotateY(0deg) } to{ transform:scale(var(--apx-k,1)) rotateX(var(--apx-x)) rotateY(360deg) } }
.apx-still .apx-stage{ animation:none; }
.apx-box{ position:absolute; transform-style:preserve-3d; }
.apx-face{ position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; background-repeat:no-repeat; }
.apx-ground{ position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(18,18,15,.28), rgba(18,18,15,.10) 55%, transparent); }
/* coasters */
.apx-coaster{ position:absolute; width:150px; height:150px; left:-75px; top:-75px; border-radius:50%; background-color:#2a2a2a; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.apx-coaster--edge{ background:#e4e0d6; box-shadow:none; }
.apx-coaster--badge{ background-color:#f6f4ee; background-size:86% 86%; background-position:50% 50%; box-shadow:inset 0 0 0 1px rgba(18,18,15,.06); }
/* stickers: lying flat, a white die-cut edge round the badge, a satin finish (soft broad sheen, no shine) */
.apx-sticker{ position:absolute; width:124px; height:124px; }
.apx-sticker__face{ position:absolute; inset:0; border-radius:50%; background:#fff no-repeat 50% 50% / 91% 91%;
  box-shadow:0 0 0 .5px rgba(18,18,15,.10), 0 1px 1px rgba(18,18,15,.16), 0 8px 14px -8px rgba(18,18,15,.30); }
.apx-sticker__face::after{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(120% 90% at 28% 22%, rgba(255,255,255,.20), transparent 55%),
             radial-gradient(90% 90% at 80% 85%, rgba(18,18,15,.05), transparent 60%); }
/* peel: the corner past a chord is cut from the face and drawn again folded back across that chord */
.apx-sticker--peel .apx-sticker__face{ -webkit-mask:linear-gradient(135deg,#000 78.5%,transparent 78.5%); mask:linear-gradient(135deg,#000 78.5%,transparent 78.5%); }
.apx-sticker__flapwrap{ position:absolute; inset:0; filter:drop-shadow(-1px -1px 2px rgba(18,18,15,.18)); }
.apx-sticker__flap{ position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, #fafaf8 60%, #e6e5e0 75%, #f3f2ee 90%);
  -webkit-mask:linear-gradient(135deg,transparent 78.5%,#000 78.5%); mask:linear-gradient(135deg,transparent 78.5%,#000 78.5%);
  transform-origin:50% 50%; transform:translate(35px,35px) rotate(45deg) scaleX(-1) rotate(-45deg) translate(-35px,-35px); }
@keyframes apxGloss{ from{ background-position:100% 0 } to{ background-position:0 0 } }
/* napkin: the card engine draws the foil; this lays the fold creases over it */
.apx-napkin{ position:absolute; width:200px; left:-100px; top:-100px; }
.apx-napkin__folds{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, transparent 49.6%, rgba(18,18,15,.06) 50%, rgba(255,255,255,.7) 50.4%, transparent 51.2%),
             linear-gradient(180deg, transparent 49.6%, rgba(18,18,15,.05) 50%, rgba(255,255,255,.6) 50.4%, transparent 51.2%),
             radial-gradient(120% 120% at 100% 100%, rgba(18,18,15,.05), transparent 60%); }
/* matchbox */
.apx-match-sleeve .apx-face{ background-color:#f6f4ee; }
.apx-match-sleeve .apx-face--top{ background-color:#2a2a2a; }
.apx-strike{ background:linear-gradient(180deg,#f6f4ee 0 22%, #5b3a2a 22% 78%, #f6f4ee 78%) !important; }
.apx-match-tray .apx-face{ background:#e9e4d8; }
.apx-match-inside{ background:
  repeating-linear-gradient(0deg, #9c2a22 0 5px, #7d1d17 5px 6px, transparent 6px 8px) right 4px top 4px / 20px calc(100% - 8px) no-repeat,
  repeating-linear-gradient(0deg, #ead6aa 0 5px, #cfb683 5px 6px, #ead6aa 6px 8px) 4px 4px / calc(100% - 8px) calc(100% - 8px) no-repeat,
  #e9e4d8 !important; }
/* mug: one studio photo from the mug builder, white background dropped into the stage colour, edges faded */
.apx-mug{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(closest-side, #000 78%, transparent 100%); mask:radial-gradient(closest-side, #000 78%, transparent 100%); }
/* luggage tag mockup: the photo, multiplied into the page; the two designs cross-fade on it */
/* the tile's view does the multiply: its perspective makes it a stacking context, so a blend set any lower
   would only see the view's own empty backdrop and the photo's white would show as a box */
.apx-view--blend{ perspective:none; mix-blend-mode:multiply; }
.apx-tagmock{ position:absolute; inset:0 6% 0; transform-origin:50% 0; animation:apxTagSwing 9s ease-in-out infinite alternate; }
.apx-tagmock__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.apx-tagmock__img--b{ animation:apxTagSwap 12s ease-in-out infinite; }
@keyframes apxTagSwap{ 0%,42%{ opacity:0 } 50%,92%{ opacity:1 } 100%{ opacity:0 } }
@keyframes apxTagSwing{ from{ transform:rotate(-1.2deg) } to{ transform:rotate(1.2deg) } }
/* luggage tag: thick board, header strip with a grommet, a clear plastic loop, a slow small swing */
.apx-stage--hang{ animation:apxHang 9s ease-in-out infinite alternate; }
@keyframes apxHang{ from{ transform:scale(var(--apx-k,1)) rotateX(-6deg) rotateY(-10deg) rotateZ(1.5deg) } to{ transform:scale(var(--apx-k,1)) rotateX(-6deg) rotateY(10deg) rotateZ(-1.5deg) } }
.apx-tag{ position:absolute; top:-128px; width:124px; height:256px; transform-origin:50% 14px; animation:apxSwing 8s ease-in-out infinite alternate; }
.apx-tag--a{ left:-132px; }
.apx-tag--b{ left:8px; top:-118px; animation-duration:9.5s; animation-delay:-3s; }
/* each tag swings a little from its loop */
@keyframes apxSwing{ from{ transform:perspective(700px) rotateY(-12deg) rotateZ(1.5deg) } to{ transform:perspective(700px) rotateY(12deg) rotateZ(-1.5deg) } }
.apx-tag__loop{ position:absolute; left:42px; top:10px; width:40px; height:80px; overflow:visible; }
.apx-tag__body{ position:absolute; left:0; top:62px; width:124px; height:194px;
  filter:drop-shadow(0 1px 0 #cfcbc0) drop-shadow(1px 1px 0 #c3beb2) drop-shadow(0 1px 0 #b9b4a7) drop-shadow(4px 10px 10px rgba(18,18,15,.22)); }
.apx-tag__face{ display:block; width:100%; height:100%;
  clip-path:polygon(18% 0, 82% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  -webkit-mask:radial-gradient(circle at 50% 7.5%, transparent 6.5px, #000 7px); mask:radial-gradient(circle at 50% 7.5%, transparent 6.5px, #000 7px); }
.apx-tag__grommet{ position:absolute; left:50%; top:calc(62px + 194px * .075); width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  border:3.5px solid #c9c4b8; box-shadow:0 1px 1px rgba(0,0,0,.35), inset 0 1px 1px rgba(0,0,0,.3); }
/* coffee carton */
.apx-carton .apx-face{ background-color:#f6f4ee; box-shadow:inset 0 0 0 .5px rgba(18,18,15,.12); }
.apx-carton .apx-face--front, .apx-carton .apx-face--back{ background-color:#2a2a2a; }
.apx-carton__side{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl;
  font:700 22px/1 var(--ap-sans); letter-spacing:.3em; color:var(--ap-ink); }
.apx-carton__lid{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:12px/1 var(--ap-orator); letter-spacing:.24em; color:var(--ap-ink); }
.apx-carton .apx-face--right{ background:linear-gradient(90deg, rgba(18,18,15,.10), rgba(18,18,15,.02)), #f6f4ee; }

/* prints: one long wall, each print hung on it */
.ap-wall{ margin-top:clamp(80px,11vw,160px); }
.ap-wall__row{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(22px,4.4vw,72px);
  padding:clamp(36px,5vw,64px) var(--ap-gutter) 0; }
.ap-print{ flex:0 1 230px; min-width:0; text-decoration:none; display:block; }
/* the product image is a 2:3 print centred in a square: crop to the print so the shadow hugs the paper */
.ap-print__art{ aspect-ratio:2/3; overflow:hidden; background:#222;
  box-shadow:0 1px 1px rgba(18,18,15,.22), 3px 6px 9px -3px rgba(18,18,15,.28), 12px 26px 40px -14px rgba(18,18,15,.38);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1); }
.ap-print__art img{ display:block; width:100%; height:100%; object-fit:cover; }
.ap-print:hover .ap-print__art{ transform:translateY(-4px);
  box-shadow:0 1px 1px rgba(18,18,15,.22), 4px 9px 12px -3px rgba(18,18,15,.26), 16px 36px 52px -14px rgba(18,18,15,.36); }
.ap-print__t{ margin-top:clamp(22px,2.6vw,34px); text-align:center; font-family:var(--ap-orator); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ap-dim); }

/* what we make, made for, about us */
.ap-sec{ padding:clamp(64px,9vw,120px) 0; }
.ap-cols{ display:grid; grid-template-columns:1.15fr .85fr 1.6fr; gap:clamp(28px,5vw,80px); }
.ap-list{ list-style:none; margin-top:14px; font-size:15px; line-height:1.9; color:var(--ap-ink); }
.ap-about p:not(.ap-eyebrow){ margin-top:14px; font-size:15px; line-height:1.6; color:var(--ap-dim); max-width:56ch; }
.ap-about a{ color:inherit; text-underline-offset:3px; }
/* the signature file may sit on white: multiply drops it on any light ground */
.ap-about .ap-sig{ display:block; margin-top:22px; width:min(250px,70%); height:auto; mix-blend-mode:multiply; }

/* the ask */
.ap-ask{ background:var(--ap-ink); color:#fff; padding:clamp(80px,11vw,150px) 0; text-align:center; }
.ap-ask h2{ font-weight:700; font-size:15px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; }
.ap-btn{ display:inline-block; margin-top:22px; padding:13px 28px; border-radius:10px; background:var(--ap-accent); color:var(--ap-ink);
  text-decoration:none; font-family:var(--ap-orator); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:transform .25s ease, background .25s ease; }
.ap-btn:hover{ transform:translateY(-2px); background:#fff; }
.ap-btn:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

.ap-foot{ display:flex; justify-content:space-between; gap:20px; padding:26px var(--ap-gutter); background:var(--ap-ink); color:rgba(255,255,255,.5);
  font-family:var(--ap-orator); font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-top:1px solid rgba(255,255,255,.12); }
.ap-foot a{ text-decoration:none; }

@media (max-width:820px){
  .ap-hero{ grid-template-columns:1fr; min-height:0; }
  .ap-hero__rig{ justify-self:start; width:min(64%,280px); order:-1; }
  .ap-wall__row{ flex-wrap:wrap; }
  .ap-print{ flex:0 1 calc(50% - 20px); }
  .ap-cols{ grid-template-columns:1fr 1fr; }
  .ap-about{ grid-column:1 / -1; }
  .ap-top__for{ display:none; }
  .apx{ flex-basis:calc(50% - 10px); }
}
@media (max-width:700px){ .ap-feat__img{ mix-blend-mode:normal; filter:brightness(0); max-width:420px; } }
@media (prefers-reduced-motion:reduce){ .ap-flap{ animation:none !important } .ap-print__art{ transition:none } }

/* edit mode (?edit): Ryan's bar along the bottom; the parts he can change are outlined */
.ap-editbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px var(--ap-gutter); background:var(--ap-ink); color:#fff; font:14px var(--ap-sans); box-shadow:0 -6px 24px rgba(0,0,0,.18); }
.ap-editbar b{ font-family:var(--ap-orator); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.ap-editbar label{ display:flex; align-items:center; gap:6px; font-size:13px; opacity:.85; }
.ap-editbar input{ font:14px var(--ap-sans); padding:6px 8px; border:0; border-radius:4px; width:140px; }
.ap-editbar button{ font:600 13px var(--ap-sans); padding:7px 12px; border-radius:4px; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; }
.ap-editbar button.go{ background:var(--ap-accent); border-color:var(--ap-accent); color:var(--ap-ink); }
.ap-editbar .msg{ font-size:13px; opacity:.85; margin-left:auto; }
.ap-editing [data-edit]{ outline:1.5px dashed var(--ap-accent); outline-offset:6px; border-radius:2px; }
.ap-editing [data-edit]:focus{ outline-style:solid; }
.ap-editing body, body.ap-editing{ padding-bottom:84px; }