/* =========================================================
   p.a. studio: SUBPAGE stylesheet (blog, posts, privacy, 404)
   Brand update 2026-10-05 (AMAA-Brand/studio/brand/BRAND-UPDATE-2026-10-05.md).
   Same look as the homepage (white nav, bold headings, green links and
   buttons, a Jet footer band with the big wordmark); copied, not linked,
   so neither file can break the other. Do not load both on one page.

   Colour 60 / 30 / 10: Cloud White #FAFAFA is the page, Jet #312F2C is the
   text and the dark bands (footer, the closing note on a post), Moss green
   #3D5A3B is every link, every button and one highlighted word.
   Reading pages are plain white with Jet text; the old paper sheet and the
   dark header field are gone. The answer box sits on the quiet --panel.

   Type: Instrument Sans for everything (headings Bold 700, -0.04em).
   Instrument Serif italic only for the hero accent word. Bricolage only in
   the "p.a." logo. The old mono [ BRACKET ] tags are hidden where they are
   pure decoration; uppercase tracked labels now read as plain text.

   Contrast (WCAG 2.2): Jet on White 12.8, Jet on panel 11.6, #66635F on
   White 5.7, Moss on White 7.3, White on Moss 7.3, White on #4A6B47 5.8,
   White on Jet 12.8, #AAA8A4 on Jet 5.7, #8DB38A on Jet 5.7.
   Focus rings: green on white, white on Jet.
   Shape rule: photos and boxes square, buttons and chips full pills.
   z-index scale: nav 50, skip link 70.
   ========================================================= */

:root{
  --white:#FAFAFA; --surface:#FFFFFF; --panel:#F0EFEC; --jet:#312F2C;
  --ink-2:#66635F; --ink-2-dark:#AAA8A4;
  --green:#3D5A3B; --green-hover:#4A6B47; --green-light:#8DB38A;
  --line:rgba(49,47,44,.14); --line-dark:rgba(250,250,250,.16);

  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --logo:'Bricolage Grotesque', 'Arial Black', sans-serif;

  --gutter:clamp(16px, 3vw, 40px);
  --max:1440px;
  --read:720px;                 /* the reading column */
  --section:clamp(72px, 9vw, 140px);
  --ease:cubic-bezier(.22, 1, .36, 1);
  --nav-h:68px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--white);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
main{overflow-x:clip}
body{background:var(--white);color:var(--jet);font-family:var(--sans);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
/* clip, not hidden: hidden would turn body into a scroll box and unstick the nav while the menu locks scrolling */
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--green);color:var(--white)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.skip{position:fixed;left:16px;top:-80px;z-index:70;background:var(--green);color:var(--white);
  padding:12px 18px;border-radius:999px;font-weight:500;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:12px}

.wrap{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}
.wrap--read{width:min(100% - 2 * var(--gutter), var(--read));margin-inline:auto}

/* ---------- type ---------- */
/* .disp used to be the Bricolage display face; it is now the bold heading style.
   The logo keeps Bricolage (see .nav__mark and .footer__mark). */
.disp{font-family:var(--sans);font-weight:700;letter-spacing:-.04em;line-height:1}
/* the accent word: serif italic in a hero only; everywhere else it is a green highlight */
.it{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--green)}
.hl{color:var(--green)}
/* retired eyebrow labels and mono tags, kept readable as plain text */
.lab{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.4;color:var(--ink-2)}
.mono{font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--ink-2)}

/* ---------- buttons: one style, one colour ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;
  border-radius:999px;background:var(--green);color:var(--white);border:0;
  font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, transform .2s ease}
.btn:hover{background:var(--green-hover)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--jet);box-shadow:inset 0 0 0 1px var(--jet)}
.btn--ghost:hover{background:var(--jet);color:var(--white)}
.btn--sm{min-height:40px;padding:8px 18px;font-size:16px}

/* ---------- the old feeling fields: retired, the page is plain white ---------- */
.feel{position:relative;background:transparent}
.feel::before{content:none}

/* =========================================================
   NAV: one line, white translucent bar (same look as the homepage)
   ========================================================= */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,250,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.nav.is-solid,.nav.is-open{border-bottom-color:var(--line)}
.nav__bar{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.nav__mark{font-family:var(--logo);font-weight:800;font-size:26px;letter-spacing:-.04em;line-height:1;
  font-variation-settings:"opsz" 96;text-decoration:none;margin-right:auto;
  display:inline-flex;align-items:baseline;gap:16px;padding:9px 0}
/* the descriptor, drawn by CSS so the legacy markup stays untouched (the link's aria-label names it) */
.nav__mark::after{content:"Creative studio for video, statics and brand";content:"Creative studio for video, statics and brand" / "";
  font-family:var(--sans);font-weight:400;font-size:17px;letter-spacing:0;font-variation-settings:normal;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:28px;font-size:17px}
.nav__links a{text-decoration:none;padding:10px 0;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition:background-size .3s var(--ease), color .2s ease}
.nav__links a:hover{background-size:100% 1px}
.nav__links a[aria-current]{color:var(--green)}
.nav__burger{display:none;width:44px;height:44px;position:relative;border-radius:999px;flex:none}
.nav__burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--jet);
  transition:transform .4s var(--ease),top .4s var(--ease)}
.nav__burger span:first-child{top:18px}
.nav__burger span:last-child{top:25px}
.nav.is-open .nav__burger span:first-child{top:21.5px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:last-child{top:21.5px;transform:rotate(-45deg)}

@media (max-width:1180px){.nav__mark::after{display:none}}
@media (max-width:959px){
  /* no backdrop filter here: it would make the fixed menu panel size itself to the nav, not the screen */
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--white)}
  .nav__bar{gap:12px}
  .nav__burger{display:block}
  .nav__links{position:fixed;left:0;right:0;top:var(--nav-h);height:calc(100dvh - var(--nav-h));
    flex-direction:column;align-items:flex-start;gap:4px;padding:28px var(--gutter);background:var(--white);
    border-top:1px solid var(--line);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .nav.is-open .nav__links{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav__links a{font-weight:700;font-size:36px;letter-spacing:-.04em;line-height:1.1;padding:6px 0;background:none}
}
@media (max-width:380px){.nav__cta{padding-inline:14px;font-size:15px}}

/* =========================================================
   HERO (blog index, 404): words first on white, then one still below,
   built like the homepage hero
   ========================================================= */
.hero{position:relative;display:flex;flex-direction:column;background:var(--white)}
.hero__inner{order:1;position:relative;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(32px,4vw,56px)}
.hero__media{order:2;position:relative;margin:0;background:var(--panel)}
.hero__media img{width:100%;height:clamp(240px,34vw,520px);object-fit:cover}
.hero__scrim{display:none}
.corners{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.corners .mono{display:none}
.hero__title{font-size:clamp(46px,7.4vw,120px);letter-spacing:-.045em;line-height:1;margin-top:clamp(16px,2vw,24px);max-width:14ch;text-wrap:balance}
.hero__title .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--green);
  display:inline-block;letter-spacing:-.02em;line-height:1.1;padding-bottom:.04em}
.hero__sub{max-width:38ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-2);margin-top:clamp(24px,3vw,40px)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

@media (prefers-reduced-motion:no-preference){
  .hero__title,.hero__sub,.hero__cta{animation:rise .6s ease both}
  .hero__sub{animation-delay:.1s}
  .hero__cta{animation-delay:.2s}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero--blog .hero__media img{object-position:62% 50%}
.hero--lost .hero__media img{object-position:66% 70%;height:clamp(240px,30vw,460px)}

@media (max-width:640px){
  .hero__cta .btn{flex:1 1 auto}
}

/* =========================================================
   BLOG INDEX: topics + the post list (a log, not a card grid)
   ========================================================= */
.blogtopics{padding-top:clamp(48px,6vw,88px)}
.blogtopics .lab{color:var(--jet);font-weight:700;font-size:22px;letter-spacing:-.01em}
.blogcats{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.blogcats span{display:inline-flex;align-items:center;min-height:38px;padding:6px 16px;border-radius:999px;
  border:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.blogcats .is-live{color:var(--jet);border-color:var(--jet)}

.bloglist{display:block;margin-top:clamp(40px,5vw,72px);padding-bottom:var(--section);border-top:1px solid var(--jet)}
.postcard{display:grid;grid-template-columns:3fr 7fr 2fr;column-gap:clamp(20px,3vw,48px);align-items:start;
  padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--jet)}
.postcard__meta{grid-column:1;grid-row:1 / span 2;font-size:16px;line-height:1.5;color:var(--ink-2);padding-top:6px;text-wrap:balance}
.postcard h2{grid-column:2;font-weight:700;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(26px,2.6vw,38px);text-wrap:balance;transition:color .25s ease}
.postcard h2 + p{grid-column:2;color:var(--ink-2);font-size:17px;line-height:1.55;margin-top:14px;max-width:62ch}
.postcard__more{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap;font-weight:500;font-size:17px;color:var(--green);
  padding-top:8px;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  transition:background-size .3s var(--ease)}
.postcard:hover h2{color:var(--green)}
.postcard:hover .postcard__more{background-size:0 1px}
.postcard:focus-visible{outline-offset:6px}
@media (max-width:900px){
  .postcard{grid-template-columns:1fr;row-gap:12px}
  .postcard__meta,.postcard h2,.postcard h2 + p,.postcard__more{grid-column:1;grid-row:auto}
  .postcard__meta{padding-top:0;font-size:15px}
  .postcard h2 + p{margin-top:0}
  .postcard__more{justify-self:start;padding-top:4px}
}

/* =========================================================
   READING PAGES (posts, privacy): one white column, Jet text
   ========================================================= */
.article__head{padding:clamp(40px,6vw,88px) 0 clamp(28px,3.5vw,48px)}
.article__back{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:17px;
  text-decoration:none;color:var(--green);background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition:background-size .3s var(--ease)}
.article__back:hover{background-size:100% 1px}
.article__meta{font-size:16px;color:var(--ink-2);margin-top:clamp(20px,3vw,36px)}
.article__head h1{font-weight:700;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(40px,5.4vw,72px);margin-top:14px;text-wrap:balance}

/* .sheet was the paper card; now it is just the reading column */
.sheet{width:min(100% - 2 * var(--gutter), var(--read));margin:0 auto;padding:clamp(28px,3.5vw,40px) 0 0;
  border-top:1px solid var(--jet)}

/* the text itself */
.article__body{font-size:19px;line-height:1.65}
.article__body > * + *{margin-top:1.15em}
.article__body p,.article__body li{text-wrap:pretty}
.article__body a{color:var(--green);text-decoration:underline;text-decoration-color:currentColor;
  text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .2s ease}
.article__body a:hover{text-decoration-thickness:2px}
.article__body strong,.article__body b{font-weight:700}
.article__body em,.article__body i{font-style:italic}
.article__body small{font-size:.85em}
.article__lead{font-size:1.14em;line-height:1.55}
@media (max-width:600px){.article__body{font-size:18px}.article__lead{font-size:1.08em}}

.article__body h2{font-weight:700;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(28px,3.2vw,40px);margin-top:2em;text-wrap:balance}
.article__body h3{font-weight:700;font-size:1.15em;line-height:1.3;letter-spacing:-.01em;margin-top:1.8em}
.article__body h4{font-weight:700;font-size:1em;margin-top:1.6em}
.article__body h2 + *,.article__body h3 + *,.article__body h4 + *{margin-top:.6em}

/* lists */
.article__body ul,.article__body ol{list-style:none;padding:0}
.article__body li + li{margin-top:.55em}
.article__body ul > li{position:relative;padding-left:1.4em}
.article__body ul > li::before{content:"";position:absolute;left:.15em;top:.66em;width:.36em;height:.36em;background:var(--green)}
.article__body ol{counter-reset:item}
.article__body ol > li{position:relative;padding-left:2.2em;counter-increment:item}
.article__body ol > li::before{content:counter(item, decimal-leading-zero);position:absolute;left:0;top:.12em;
  font-weight:500;font-size:.84em;font-variant-numeric:tabular-nums;color:var(--green)}
.article__body li > ul,.article__body li > ol{margin-top:.55em}

/* quotes and the "where p.a. fits" note share one calm treatment */
.article__body blockquote{margin:1.8em 0;padding:.2em 0 .2em 1.3em;border-left:3px solid var(--green)}
.article__body blockquote p + p{margin-top:.8em}
.article__body blockquote cite{display:block;margin-top:.6em;font-style:normal;font-size:.85em;color:var(--ink-2)}

/* tables: hairlines, plain heads, no zebra */
.article__body table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;margin:1.8em 0}
.article__body th{text-align:left;vertical-align:bottom;font-weight:500;font-size:15px;color:var(--ink-2);
  padding:0 16px 10px 0;border-bottom:1px solid var(--jet)}
.article__body td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);overflow-wrap:break-word}
.article__body th:last-child,.article__body td:last-child{padding-right:0}
.article__body td:first-child{font-weight:500}
@media (max-width:560px){.article__body table{font-size:15px}.article__body th,.article__body td{padding-right:10px}}

/* code, rules, figures (rare, but readable when they appear) */
.article__body code,.article__body kbd{font-family:ui-monospace, Menlo, monospace;font-size:.84em;background:var(--panel);padding:.12em .36em}
.article__body pre{font-family:ui-monospace, Menlo, monospace;font-size:15px;line-height:1.6;background:var(--jet);color:var(--white);
  padding:20px 22px;overflow-x:auto}
.article__body pre code{background:none;padding:0;font-size:inherit}
.article__body hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.article__body figcaption{font-size:15px;color:var(--ink-2);margin-top:10px}

/* the short answer: the first thing in the column, on the quiet panel */
.article__answer{background:var(--panel);padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px)}
.article__answer > * + *{margin-top:.5em}
.article__answer p{line-height:1.6}
.article__answer .article__answer-label{font-weight:700;font-size:1.15em;line-height:1.2;letter-spacing:-.02em}
.article__answer + *{margin-top:1.8em}

/* the closing note: a small Jet band at the end of the column */
.article__cta{margin-top:3.2em !important;background:var(--jet);color:var(--white);padding:clamp(28px,4.6vw,52px)}
.article__body .article__cta h2{margin-top:0;color:var(--white);font-size:clamp(28px,3.4vw,42px)}
.article__cta p{margin-top:16px;color:var(--white);font-size:18px;line-height:1.55}
.article__body .article__cta a:not(.btn){color:var(--green-light)}
.article__body .article__cta .btn{margin-top:26px;color:var(--white);text-decoration:none}
.article__cta :focus-visible{outline-color:var(--white)}

/* buttons that look like links (privacy: "Open cookie settings") */
.linkbtn{text-decoration:underline;font-size:inherit;line-height:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
.article__body .linkbtn{color:var(--green);min-height:44px;padding:0;margin:-12px 0;vertical-align:baseline}
.article__body .linkbtn:hover{text-decoration-thickness:2px}

/* =========================================================
   FOOTER: a Jet band with the links and the big wordmark
   ========================================================= */
.footer{background:var(--jet);color:var(--white);margin-top:var(--section);padding-top:clamp(40px,5vw,72px);
  font-size:16px;overflow:hidden}
.page--blog .footer,.page--lost .footer{margin-top:0}
.footer :focus-visible{outline-color:var(--white)}
.footer__grid{display:grid;grid-template-columns:4fr 8fr;gap:40px}
.footer__mark{font-family:var(--logo);font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1;
  font-variation-settings:"opsz" 96;color:var(--white)}
.footer__tag{color:var(--white);margin-top:12px;font-size:18px}
.footer__tag .it{color:var(--green-light)}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;color:var(--ink-2-dark)}
.footer a,.footer .linkbtn{color:var(--white);text-decoration:underline;text-decoration-color:var(--line-dark);
  text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s ease}
.footer a:hover,.footer .linkbtn:hover{text-decoration-color:currentColor}
.footer__cols a,.footer .linkbtn{display:inline-block;padding:7px 0}
/* phones: every footer link is a full 44px tap target */
@media (max-width:820px){.footer__cols a,.footer .linkbtn{padding:10px 0;min-height:44px}.footer__cols p{line-height:1.3}}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:48px;padding-top:20px;
  border-top:1px solid var(--line-dark);font-size:15px;color:var(--ink-2-dark)}
.footer__psource a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:12px 0}
.footer__psource-g{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:var(--white);color:var(--jet);font-weight:700;font-size:12px}
/* the very large wordmark, decoration only (hidden from screen readers) */
.footer::after{content:"p.a. marketing hq";content:"p.a. marketing hq" / "";display:block;white-space:nowrap;
  font-family:var(--sans);font-weight:400;font-size:clamp(32px,13.2vw,228px);letter-spacing:-.06em;line-height:.8;
  color:var(--white);margin:clamp(24px,3vw,40px) 0 0 calc(var(--gutter) - .04em);padding-bottom:.24em}
@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr;gap:18px}
}

/* ---------- print: the column is the page ---------- */
@media print{
  html,body{background:#fff;color:#000}
  .nav,.skip,.footer,.article__back,.article__cta .btn{display:none !important}
  .article__head{padding:0 0 12pt;color:#000}
  .article__meta{color:#333}
  .sheet{width:auto;margin:0;padding:0;border:0}
  .article__body{max-width:none;font-size:11.5pt}
  .article__body a{color:#000}
  .article__cta{background:#fff;color:#000;border:1px solid #999}
  .article__body .article__cta h2,.article__cta p{color:#000}
}

/* ---------- reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}