/* bioQ design system · trial v0.1 · "The Plate and the Window"
   Base: Direction A (The Blank Plate). A little of Direction B (The Cut-Out).
   One stylesheet for the style guide and for every Stage 3 page.

   The three rules the whole system hangs on:
   1. Anything that belongs to the client sits on a brass plate.
   2. One window onto moss per page, never more.
   3. Every image says whether it is a photograph.                                   */

/* ───────── tokens ───────── */
:root{
  /* colour: ground */
  --bq-plaster:#ECEDE8;      /* page ground, the gallery wall */
  --bq-plaster-2:#DFE2DC;    /* alternate band */
  --bq-card:#F7F7F4;         /* raised panel, image niche */
  --bq-white:#FFFFFF;        /* behind white-ground photographs only */
  --bq-line:#C9CEC7;         /* hairlines */
  /* colour: bioQ's own (from the logo) */
  --bq-ink:#0A2E30;          /* logo ink teal: all text, dark bands */
  --bq-soft:#4B6061;         /* secondary text, 5.6:1 on plaster */
  --bq-teal:#3EABA8;         /* logo teal: marks, large fills, focus on dark */
  --bq-teal-deep:#1B6F6E;    /* links and interactive on light, 5:1 on plaster */
  --bq-green:#A2D04F;        /* logo green: the Photograph label, highlights on ink */
  --bq-green-soft:#E3F0C9;
  --bq-on-ink:#EEF3EE;       /* text on ink */
  --bq-on-ink-soft:#A9BFBD;
  /* colour: the client's */
  --bq-brass:#9A7B48;        /* plate edge */
  --bq-plate:#E6DABD;        /* plate face */
  --bq-plate-ink:#57431D;    /* plate lettering, 6.8:1 */
  /* type */
  --bq-serif:"Spectral",Georgia,"Times New Roman",serif;
  --bq-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bq-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --bq-cut:"Archivo","Arial Narrow",Arial,sans-serif;   /* cut-out words only */
  --bq-d1:clamp(46px,7vw,104px);
  --bq-d2:clamp(34px,4.6vw,66px);
  --bq-t1:clamp(22px,2vw,28px);
  --bq-lead:clamp(18px,1.5vw,21px);
  --bq-body:17px;
  --bq-small:15px;
  --bq-cap:11.5px;
  /* space: a 4 px base */
  --bq-1:4px; --bq-2:8px; --bq-3:12px; --bq-4:16px; --bq-5:24px; --bq-6:32px; --bq-7:48px; --bq-8:72px; --bq-9:112px;
  --bq-gut:clamp(18px,5vw,72px);      /* page side gutter */
  --bq-sec:clamp(44px,7vw,112px);     /* section padding, top and bottom */
  --bq-max:1320px;                    /* widest content */
  /* motion */
  --bq-fast:180ms;                    /* presses, lifts */
  --bq-med:320ms;                     /* colour and state */
  --bq-slow:700ms;                    /* photographs cross-fading */
  --bq-ease:cubic-bezier(.2,.7,.2,1);
}

/* ───────── base ───────── */
.bq,.bq *{box-sizing:border-box}
.bq{background:var(--bq-plaster);color:var(--bq-ink);font-family:var(--bq-sans);font-size:var(--bq-body);line-height:1.55;-webkit-font-smoothing:antialiased}
.bq img{display:block;max-width:100%;height:auto}
.bq p{margin:0}
.bq a{color:var(--bq-teal-deep);text-underline-offset:4px}
.bq :focus-visible{outline:2px solid var(--bq-teal-deep);outline-offset:3px}
.bq-onink :focus-visible{outline-color:var(--bq-green)}

/* type */
.bq-d1,.bq-d2,.bq-t1{font-family:var(--bq-serif);font-weight:300;margin:0;letter-spacing:-.015em;text-wrap:balance}
.bq-d1{font-size:var(--bq-d1);line-height:1.04}
.bq-d2{font-size:var(--bq-d2);line-height:1.06}
.bq-t1{font-size:var(--bq-t1);font-weight:400;line-height:1.15;letter-spacing:-.005em}
.bq-d1 em,.bq-d2 em{font-style:italic}
.bq-lead{font-size:var(--bq-lead);line-height:1.5;color:var(--bq-soft);max-width:32em}
.bq-small{font-size:var(--bq-small);line-height:1.45;color:var(--bq-soft)}
.bq-cap{font-family:var(--bq-mono);font-size:var(--bq-cap);letter-spacing:.04em;line-height:1.55;color:var(--bq-soft)}
.bq-cap b{font-weight:500;color:var(--bq-ink);text-transform:uppercase;letter-spacing:.08em}
.bq-onink{background:var(--bq-ink);color:var(--bq-on-ink)}
.bq-onink .bq-lead,.bq-onink .bq-small,.bq-onink .bq-cap{color:var(--bq-on-ink-soft)}
.bq-onink .bq-cap b{color:var(--bq-on-ink)}
.bq-onink a{color:var(--bq-green)}

/* layout helpers */
.bq-wrap{max-width:var(--bq-max);margin-inline:auto;padding-inline:var(--bq-gut)}
.bq-sec{padding-block:var(--bq-sec);display:flex;flex-direction:column;gap:clamp(24px,3vw,44px)}
.bq-sec--dim{background:var(--bq-plaster-2)}
.bq-sec--rule{border-top:1px solid var(--bq-line)}
.bq-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.bq-row{display:flex;flex-wrap:wrap;gap:var(--bq-3);align-items:center}
.bq-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px)}
.bq-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}

/* ───────── buttons, chips, labels ───────── */
.bq-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font:500 15.5px/1 var(--bq-sans);text-decoration:none;border:1px solid var(--bq-ink);color:var(--bq-ink);background:transparent;cursor:pointer;transition:background var(--bq-med) var(--bq-ease),color var(--bq-med) var(--bq-ease),border-color var(--bq-med) var(--bq-ease)}
.bq a.bq-btn{color:var(--bq-ink)}
.bq-btn:hover{background:var(--bq-ink);color:var(--bq-plaster)}
.bq-btn--solid,.bq a.bq-btn--solid{background:var(--bq-ink);color:var(--bq-on-ink)}
.bq-btn--solid:hover{background:var(--bq-teal-deep);border-color:var(--bq-teal-deep);color:#fff}
.bq-onink .bq-btn,.bq-onink a.bq-btn{border-color:var(--bq-on-ink);color:var(--bq-on-ink)}
.bq-onink .bq-btn:hover{background:var(--bq-on-ink);color:var(--bq-ink)}
.bq-onink .bq-btn--solid,.bq-onink a.bq-btn--solid{background:var(--bq-green);border-color:var(--bq-green);color:var(--bq-ink)}
.bq-onink .bq-btn--solid:hover{background:#fff;border-color:#fff;color:var(--bq-ink)}

.bq-chips{display:flex;flex-wrap:wrap;gap:var(--bq-2)}
.bq-chip{font:500 14px/1 var(--bq-sans);min-height:44px;padding:0 15px;border:1px solid var(--bq-soft);background:transparent;color:var(--bq-ink);cursor:pointer;transition:background var(--bq-med) var(--bq-ease)}
.bq-chip:hover{border-color:var(--bq-ink)}
.bq-chip[aria-pressed="true"]{background:var(--bq-plate);border-color:var(--bq-brass);color:var(--bq-plate-ink);letter-spacing:.05em}

/* image labels: every image carries one */
.bq-tag{display:inline-block;font-family:var(--bq-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;padding:2px 7px;border:1px solid var(--bq-ink);background:var(--bq-green);color:var(--bq-ink)}
.bq-tag--staged{background:var(--bq-green-soft)}
.bq-tag--sample{background:transparent;border:1px dashed var(--bq-soft);color:var(--bq-soft)}
.bq-onink .bq-tag--sample{border-color:var(--bq-on-ink-soft);color:var(--bq-on-ink-soft)}
.bq-note{font-family:var(--bq-mono);font-size:11px;border:1px dashed var(--bq-soft);color:var(--bq-soft);padding:2px 6px;display:inline-block}

/* the plate: whatever belongs to the client */
.bq-plate{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 16px;background:var(--bq-plate);border:1px solid var(--bq-brass);color:var(--bq-plate-ink);font:500 12px/1.2 var(--bq-sans);letter-spacing:.22em;text-transform:uppercase;text-align:center;text-decoration:none}
.bq a.bq-plate{color:var(--bq-plate-ink)}
.bq-plate::before,.bq-plate::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--bq-brass);flex:none}
.bq-plate--input{width:min(100%,360px);padding:0 12px;gap:0}
.bq-plate--input input{flex:1;min-width:0;border:0;background:transparent;text-align:center;min-height:44px;color:var(--bq-plate-ink);font:500 13px/1.2 var(--bq-sans);letter-spacing:.22em;text-transform:uppercase}
.bq-plate--input input::placeholder{color:var(--bq-plate-ink);opacity:.5}
.bq-plate--input:focus-within{outline:2px solid var(--bq-teal-deep);outline-offset:3px}
.bq-plate--input input:focus{outline:none}

/* ───────── navigation ───────── */
.bq-nav{display:flex;align-items:center;gap:26px;padding:16px var(--bq-gut);background:var(--bq-plaster);border-bottom:1px solid var(--bq-line)}
.bq-nav--sticky{position:sticky;top:0;z-index:10}
.bq-logo{display:block;width:84px;flex:none;color:var(--bq-ink)}
.bq-nav ul{list-style:none;display:flex;gap:24px;margin:0 auto 0 8px;padding:0;font-size:15px}
.bq-nav ul a{color:var(--bq-ink);text-decoration:none}
.bq-nav ul a:hover,.bq-nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--bq-teal);text-decoration-thickness:2px;text-underline-offset:7px}
.bq-nav__quiet{font-size:14px;color:var(--bq-soft)!important;text-decoration:none}

/* ───────── hero: the gallery ───────── */
.bq-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,5vw,72px) var(--bq-gut) clamp(40px,6vw,88px)}
.bq-hero__txt{display:flex;flex-direction:column;gap:22px}
.bq-stand{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.bq-stand img{width:100%;max-width:600px;background:var(--bq-white)}
.bq-stand figcaption{text-align:center;max-width:34em}

/* ───────── the window: one per page ───────── */
.bq-cutband{background:var(--bq-ink);color:var(--bq-on-ink);padding:clamp(28px,4vw,56px) var(--bq-gut) var(--bq-sec);display:flex;flex-direction:column;gap:clamp(22px,3vw,40px)}
.bq-cut{display:block;width:100%;height:auto}
.bq-cut text{font-family:var(--bq-cut);font-weight:900;font-stretch:62%;font-size:450px}
.bq-cutband figure{margin:0;display:flex;flex-direction:column;gap:10px}
.bq-cutband figure img{width:100%}

/* ───────── product card ───────── */
.bq-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;text-decoration:none;color:var(--bq-ink)}
.bq a.bq-card{color:var(--bq-ink)}
.bq-card__im{width:100%;aspect-ratio:1;background:var(--bq-card);display:grid;place-items:center;overflow:hidden}
.bq-card__im img{width:100%;height:100%;object-fit:cover;transition:transform var(--bq-slow) var(--bq-ease)}
.bq-card__im img.bq-mul{mix-blend-mode:multiply;object-fit:contain;padding:6%}
.bq-card:hover .bq-card__im img{transform:scale(1.03)}
.bq-card p{font-size:15.5px;color:var(--bq-soft);max-width:26em;line-height:1.45}

/* ───────── the scale: how much of it is yours ───────── */
.bq-scale{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.bq-stage{background:var(--bq-card);aspect-ratio:1;position:relative;overflow:hidden}
.bq-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--bq-slow) ease}
.bq-stage img.is-on{opacity:1}
.bq-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--bq-line)}
.bq-rail button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:54px minmax(0,1fr);gap:4px 12px;width:100%;padding:16px 0;border-bottom:1px solid var(--bq-line);color:var(--bq-soft)}
.bq-rail button:focus-visible{outline:2px solid var(--bq-teal-deep);outline-offset:2px}
.bq-rail .n{font-family:var(--bq-mono);font-size:12px;padding-top:7px}
.bq-rail .t{font-family:var(--bq-serif);font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--bq-ink)}
.bq-rail .d{grid-column:2;font-size:15.5px;line-height:1.45;display:none}
.bq-rail button[aria-pressed="true"]{color:var(--bq-ink)}
.bq-rail button[aria-pressed="true"] .t{font-style:italic}
.bq-rail button[aria-pressed="true"] .n{color:var(--bq-teal-deep)}
.bq-rail button[aria-pressed="true"] .d{display:block}

/* ───────── the levels: the window grows ───────── */
.bq-level{display:flex;flex-direction:column;gap:12px}
.bq-level__plate{aspect-ratio:4/5;background:var(--bq-card);position:relative;overflow:hidden;border:1px solid var(--bq-line);transition:transform var(--bq-fast) var(--bq-ease)}
.bq-level:hover .bq-level__plate{transform:translateY(-4px)}
.bq-level__plate::before{content:"";position:absolute;background:var(--bq-moss-img,none) center/260px,#2F5E3A;box-shadow:inset 0 6px 14px rgba(4,20,12,.6);inset:var(--in)}
.bq-level--1 .bq-level__plate{--in:62% 34% 12% 34%}.bq-level--1 .bq-level__plate::before{border-radius:50%}
.bq-level--2 .bq-level__plate{--in:34% 24% 12% 24%}.bq-level--2 .bq-level__plate::before{border-radius:999px 999px 0 0}
.bq-level--3 .bq-level__plate{--in:18% 12% 10% 12%}.bq-level--3 .bq-level__plate::before{border-radius:70% 8% 70% 8%}
.bq-level--4 .bq-level__plate{--in:7%}
.bq-level__plate span{position:absolute;left:9%;top:6%;font-family:var(--bq-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bq-ink);background:var(--bq-card);padding:2px 5px;z-index:1}
.bq-level p{font-size:15.5px;color:var(--bq-soft);line-height:1.45}

/* ───────── Specials: path, anatomy, promise ───────── */
.bq-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;counter-reset:p}
.bq-path li{counter-increment:p;border-top:1px solid currentColor;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.bq-path li::before{content:"0" counter(p);font-family:var(--bq-mono);font-size:12px;opacity:.7}
.bq-path b{font-family:var(--bq-serif);font-weight:400;font-size:22px;line-height:1.15}
.bq-path p{font-size:15px;line-height:1.45;color:var(--bq-soft)}
.bq-onink .bq-path p{color:var(--bq-on-ink-soft)}
.bq-when{font-family:var(--bq-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bq-teal-deep)}
.bq-onink .bq-when{color:var(--bq-green)}

.bq-anat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.bq-anat>img{max-width:460px;width:100%;margin:auto}
.bq-yo{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bq-yo ul{margin:12px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.5}
.bq-yo li{padding:8px 0;border-bottom:1px solid var(--bq-line)}
.bq-ours{display:inline-flex;align-items:center;min-height:38px;font:500 12px/1.2 var(--bq-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bq-soft)}
.bq-statement{font-family:var(--bq-serif);font-weight:300;font-size:clamp(30px,4.2vw,60px);line-height:1.1;letter-spacing:-.015em;max-width:17em;text-wrap:balance}

/* ───────── proof ───────── */
.bq-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.bq-proof div{border-top:1px solid currentColor;padding-top:12px}
.bq-proof b{display:block;font-family:var(--bq-serif);font-weight:300;font-size:clamp(38px,4.4vw,64px);line-height:1}
.bq-proof span{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:var(--bq-soft)}
.bq-onink .bq-proof span{color:var(--bq-on-ink-soft)}
.bq-onink .bq-proof b{color:var(--bq-green)}

/* ───────── the brief ───────── */
.bq-brief{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,4vw,64px)}
.bq-q{padding:18px 0;border-top:1px solid var(--bq-line);display:flex;flex-direction:column;gap:12px}
.bq-q>label,.bq-q>span{font-family:var(--bq-serif);font-size:22px;line-height:1.2}
.bq-field{font:400 17px/1.3 var(--bq-sans);padding:12px 14px;border:1px solid var(--bq-ink);background:var(--bq-card);color:var(--bq-ink);min-height:48px;width:100%}
.bq-field::placeholder{color:var(--bq-soft)}
.bq-sheet{background:var(--bq-card);padding:24px;display:flex;flex-direction:column;gap:14px;align-self:start;border:1px solid var(--bq-line)}
.bq-sheet pre{font-family:var(--bq-mono);font-size:13px;line-height:1.65;white-space:pre-wrap;margin:0;min-height:140px}
.bq-sheet pre.is-empty{color:var(--bq-soft)}

/* ───────── footer ───────── */
.bq-foot{background:var(--bq-ink);color:var(--bq-on-ink);padding:clamp(36px,5vw,64px) var(--bq-gut);display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
.bq-foot h4{font:500 11.5px/1.4 var(--bq-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bq-on-ink-soft);margin:0 0 10px}
.bq-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.bq-foot a{color:var(--bq-on-ink);text-decoration:none}
.bq-foot a:hover{text-decoration:underline;text-decoration-color:var(--bq-green)}
.bq-foot .bq-logo{color:var(--bq-on-ink);width:104px}

/* lists inside components carry no default indent */
.bq-rail,.bq-path,.bq-nav ul,.bq-foot ul,.bq-yo ul{padding-left:0}

/* ───────── narrow screens ───────── */
@media (max-width:900px){
  .bq-nav ul,.bq-nav__quiet{display:none}
  .bq-nav{justify-content:space-between}
  .bq-hero,.bq-head,.bq-scale,.bq-anat,.bq-brief{grid-template-columns:minmax(0,1fr)}
  .bq-grid3{grid-template-columns:minmax(0,1fr)}
  .bq-grid4,.bq-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bq-path{grid-template-columns:minmax(0,1fr)}
  .bq-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.bq *,.bq *::before{transition:none!important;animation:none!important}}