/* Product Garage Brand Book 3.0. The first three blocks are the handoff token system. */
@layer tokens, base, layout, components, responsive;
@layer tokens {
  :root {
    /* Primitive. Oil and Chalk are founder-confirmed. All other colours remain working. */
    --pg-oil:#171512; --pg-chalk:#F3EEE5; --pg-steel:#2B2824;
    --pg-concrete:#8F8A80; --pg-graphite:#5A564F;
    --pg-signal:#D23A22; --pg-signal-on-oil:#F07D66; --pg-signal-on-chalk:#A82A18;
    --pg-paper:#E9E2D7; --pg-rule-dark:#D2C9BC; --pg-rule-light:#4A453E;
    --pg-space-1:.25rem; --pg-space-2:.5rem; --pg-space-3:.75rem; --pg-space-4:1rem;
    --pg-space-6:1.5rem; --pg-space-8:2rem; --pg-space-12:3rem; --pg-space-16:4rem;
    --pg-space-24:6rem; --pg-space-32:8rem;
    --pg-font-display:'Melodrama','Bodoni Moda',Georgia,serif;
    --pg-font-utility:'Switzer',Arial,sans-serif;
    /* Semantic. These aliases make light and dark surfaces explicit. */
    --pg-bg:var(--pg-oil); --pg-fg:var(--pg-chalk); --pg-muted:#C6BFB4;
    --pg-surface:var(--pg-steel); --pg-line:var(--pg-rule-light); --pg-link:var(--pg-chalk);
    --pg-focus:var(--pg-signal-on-oil); --pg-accent-text:var(--pg-signal-on-oil);
    --pg-reading:68ch; --pg-shell:1392px; --pg-radius:2px;
    /* Component. No red button fill: red signals a decision, it does not ask. */
    --pg-button-bg:var(--pg-chalk); --pg-button-fg:var(--pg-oil);
    --pg-card-bg:var(--pg-steel); --pg-card-fg:var(--pg-chalk);
    --pg-label-size:.76rem; --pg-label-track:.14em;
  }
  .light { --pg-bg:var(--pg-chalk); --pg-fg:var(--pg-oil); --pg-muted:var(--pg-graphite);
    --pg-surface:var(--pg-paper); --pg-line:var(--pg-rule-dark); --pg-link:var(--pg-oil);
    --pg-focus:var(--pg-signal-on-chalk); --pg-accent-text:var(--pg-signal-on-chalk);
    --pg-card-bg:var(--pg-paper); --pg-card-fg:var(--pg-oil); }
}
@layer base {
  *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--pg-oil);color:var(--pg-chalk);font-family:var(--pg-font-utility);font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration-color:currentColor;text-underline-offset:3px} a:hover{color:var(--pg-signal-on-oil)}
  img{max-width:100%;display:block} button{font:inherit} :focus-visible{outline:2px solid var(--pg-focus);outline-offset:4px}
  ::selection{background:var(--pg-signal);color:#fff}
  h1,h2,h3,h4,p,ul,ol,dl{margin-top:0} h1,h2,.display,.serif{font-family:var(--pg-font-display);font-weight:400;letter-spacing:-.055em}
  h3,h4{letter-spacing:-.03em} p,li,td,dd{overflow-wrap:anywhere} strong{font-weight:650}
  .light{background:var(--pg-bg);color:var(--pg-fg)} .light a:hover{color:var(--pg-signal-on-chalk)}
  .small{font-size:.84rem}.tiny{font-size:.72rem}.muted{color:var(--pg-muted)}
  .eyebrow{font-size:var(--pg-label-size);letter-spacing:var(--pg-label-track);text-transform:uppercase;font-weight:700;line-height:1.5}
  .serif{font-size:clamp(2.3rem,4.2vw,4.9rem);line-height:1.09}
}
@layer layout {
  .skip{position:absolute;top:-80px;left:20px;z-index:100;background:var(--pg-chalk);color:var(--pg-oil);padding:12px 16px}.skip:focus{top:10px}
  .shell{width:min(calc(100% - 64px),var(--pg-shell));margin-inline:auto}
  .top{position:sticky;top:0;z-index:50;background:rgba(23,21,18,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--pg-rule-light)}
  .top .shell{min-height:66px;display:flex;align-items:center;gap:30px}.logo-type{font-size:1.03rem;font-weight:700;letter-spacing:-.055em;white-space:nowrap;text-decoration:none}.logo-type i{color:var(--pg-signal-on-oil);font-style:normal}
  .nav{margin-left:auto;display:flex;gap:21px;overflow:auto;white-space:nowrap}.nav a{text-decoration:none;color:#C7BFB3;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}.nav a:hover{color:#fff}
  .hero{min-height:680px;position:relative;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--pg-rule-light)}
  .hero:before{content:"";position:absolute;inset:0 0 30%;background:repeating-linear-gradient(to bottom,rgba(243,238,229,.11) 0 1px,transparent 1px 24px);mask-image:linear-gradient(#000,transparent);pointer-events:none}
  .hero:after{content:"";position:absolute;right:-10%;top:8%;width:60%;height:85%;background:radial-gradient(ellipse,rgba(210,58,34,.11),transparent 62%);pointer-events:none}
  .hero .shell{position:relative;z-index:1;padding-block:92px 61px}.hero h1{font-size:clamp(5.5rem,13vw,13.4rem);line-height:.78;margin:35px 0 50px;max-width:1240px}.hero h1 span{color:var(--pg-signal)}
  .hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:50px}.hero-lead{font-size:clamp(1.15rem,1.85vw,1.65rem);line-height:1.38;letter-spacing:-.025em;max-width:680px;margin:0}.hero-meta{text-align:right;color:#C7BFB3;font-size:.76rem;line-height:1.8;white-space:nowrap}
  .section{padding:112px 0;border-bottom:1px solid var(--pg-line);background:var(--pg-bg);color:var(--pg-fg);scroll-margin-top:65px}
  .section-head{display:grid;grid-template-columns:minmax(160px,.24fr) 1fr;gap:42px;margin-bottom:52px}.section-head .eyebrow{padding-top:10px;color:var(--pg-muted)}.section-head h2{font-size:clamp(4.2rem,7.5vw,8.8rem);line-height:.9;margin:0}.section-head p{max-width:var(--pg-reading);font-size:1.12rem;line-height:1.55;margin:25px 0 0;color:var(--pg-muted)}
  .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .reading{max-width:var(--pg-reading)}.space-top{margin-top:70px}.space-sm{margin-top:28px}.space-md{margin-top:45px}
  .footer{padding:70px 0 100px;display:flex;justify-content:space-between;gap:30px;color:#BBB3A7}.footer p{font-size:.82rem;margin:0}
}
@layer components {
  .status{display:inline-flex;align-items:center;gap:8px;border:1px solid currentColor;padding:5px 9px;border-radius:100px;font-size:.66rem;letter-spacing:.095em;text-transform:uppercase;font-weight:700;line-height:1.2;white-space:nowrap}.status:before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%}.status.confirmed{color:#D8D2C7}.status.observed{color:#B5CEA8}.status.working{color:#F5A18D}.status.open{color:#EAC388}.light .status.confirmed{color:#4E4A43}.light .status.observed{color:#3E6543}.light .status.working{color:#A82A18}.light .status.open{color:#805617}
  .panel{background:var(--pg-card-bg);color:var(--pg-card-fg);border:1px solid var(--pg-line);padding:28px;min-width:0}.panel h3{font-family:var(--pg-font-display);font-size:clamp(2rem,2.7vw,3rem);font-weight:400;letter-spacing:-.045em;line-height:1.04;margin:18px 0}.panel p{margin-bottom:0}.panel ul{padding-left:21px;margin-bottom:0}.panel li+li{margin-top:8px}
  .label{font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--pg-accent-text)}
  .rule{border-top:1px solid var(--pg-line);padding-top:16px;margin-top:24px}.signal{border-left:3px solid var(--pg-signal);padding:21px 28px;background:var(--pg-surface)}.signal p:last-child{margin-bottom:0}
  .bigline{font-family:var(--pg-font-display);font-size:clamp(2.8rem,5.2vw,6.6rem);line-height:1.03;letter-spacing:-.055em;margin:0 0 32px}
  .tablewrap{overflow:auto}.table{border-collapse:collapse;width:100%;min-width:760px}.table th,.table td{padding:17px 17px;border-bottom:1px solid var(--pg-line);vertical-align:top;font-size:.83rem;line-height:1.47;text-align:left}.table th{font-size:.67rem;letter-spacing:.1em;text-transform:uppercase}.table td:first-child{font-weight:700}.table .soft{color:var(--pg-muted);font-weight:400}
  .numbered{counter-reset:n;list-style:none;padding:0;margin:0}.numbered li{counter-increment:n;padding:16px 0 16px 44px;border-top:1px solid var(--pg-line);position:relative}.numbered li:before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:16px;color:var(--pg-accent-text);font-size:.73rem;font-weight:700}
  .engine{border:1px solid var(--pg-line)}.engine article{padding:22px;border-right:1px solid var(--pg-line)}.engine article:last-child{border:0}.engine b{font-size:.74rem;color:var(--pg-accent-text)}.engine h3{font-size:1.2rem;margin:25px 0 10px}.engine p{font-size:.81rem;color:var(--pg-muted);margin:0}
  .route{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start;margin:0 0 75px}.route img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--pg-line)}.route h3{font-family:var(--pg-font-display);font-size:clamp(3rem,5vw,5.5rem);font-weight:400;line-height:.96;letter-spacing:-.05em;margin:18px 0}.route p{max-width:49ch}.route dl{display:grid;grid-template-columns:90px 1fr;gap:8px 18px;font-size:.84rem}.route dt{font-weight:700}.route dd{margin:0;color:var(--pg-muted)}.route .caption{font-size:.72rem;color:var(--pg-muted);margin-top:9px}
  .trilogy{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--pg-line)}.trilogy>div{padding:25px;border-right:1px solid var(--pg-line)}.trilogy>div:last-child{border:0}.trilogy h3{font-family:var(--pg-font-display);font-size:2.7rem;font-weight:400;letter-spacing:-.04em;line-height:1;margin:15px 0}.trilogy p{font-size:.84rem;margin:0}
  .swatches{display:grid;grid-template-columns:2fr 2fr 1fr 1fr 1fr;gap:9px}.swatch{min-height:175px;display:flex;justify-content:space-between;flex-direction:column;padding:16px;font-size:.78rem;font-weight:700}.swatch small{font-weight:400}.swatch.oil{background:var(--pg-oil);color:var(--pg-chalk);border:1px solid var(--pg-rule-light)}.swatch.chalk{background:var(--pg-chalk);color:var(--pg-oil);border:1px solid var(--pg-rule-dark)}.swatch.red{background:var(--pg-signal);color:#fff}.swatch.steel{background:var(--pg-steel);color:var(--pg-chalk)}.swatch.concrete{background:var(--pg-concrete);color:var(--pg-oil)}
  .typepair{display:grid;grid-template-columns:1.15fr .85fr;gap:30px}.typepair>div{border-top:1px solid var(--pg-line);padding-top:20px}.typepair .display{font-size:clamp(3.5rem,7vw,8rem);line-height:.91;margin:22px 0}.typepair .utility{font-size:clamp(1.8rem,3vw,3.4rem);line-height:1.2;letter-spacing:-.04em;margin:22px 0}
  .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.sample{min-width:0}.sample .art{height:330px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border:1px solid var(--pg-line);background:var(--pg-oil);color:var(--pg-chalk)}.sample .art h3{font-family:var(--pg-font-display);font-size:clamp(2.3rem,3vw,3.5rem);font-weight:400;line-height:1;letter-spacing:-.05em;margin:0}.sample .art p{font-size:.83rem;line-height:1.4;margin:0}.sample .art .cta{background:var(--pg-chalk);color:var(--pg-oil);padding:11px 16px;display:inline-block;width:max-content;font-size:.73rem;font-weight:700;text-decoration:none}.sample .art.paper{background:var(--pg-chalk);color:var(--pg-oil)}.sample .art.paper .cta{background:var(--pg-oil);color:var(--pg-chalk)}.sample .art.photo{background:linear-gradient(90deg,rgba(23,21,18,.96),rgba(23,21,18,.17)),url('moodboard-workshop-documentary.png') center/cover}.sample .art.shutter{background:linear-gradient(90deg,rgba(23,21,18,.85),rgba(23,21,18,.25)),url('moodboard-shutter-signal.png') center/cover}.sample .art.gridart{background-image:linear-gradient(rgba(243,238,229,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(243,238,229,.07) 1px,transparent 1px);background-size:25px 25px}.sample .art.email{background:var(--pg-paper);color:var(--pg-oil)}.sample .art.note{background:var(--pg-chalk);color:var(--pg-oil);justify-content:flex-start;gap:22px}.sample figcaption{font-size:.8rem;color:var(--pg-muted);padding-top:10px}
  .timeline{display:grid;grid-template-columns:130px 1fr 1fr;border-top:1px solid var(--pg-line)}.timeline>div{padding:20px 17px;border-bottom:1px solid var(--pg-line)}.timeline .when{color:var(--pg-accent-text);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.timeline p{margin:0;font-size:.85rem;color:var(--pg-muted)}.timeline strong{display:block;margin-bottom:5px}
  .sample .art{height:auto;min-height:380px}
  .sourcegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sourcegrid a{display:block;text-decoration:none;border-top:1px solid var(--pg-line);padding:15px 0;font-size:.86rem}.sourcegrid a span{display:block;color:var(--pg-muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
}
@layer responsive {
  @media(max-width:1080px){.grid4{grid-template-columns:repeat(2,1fr)}.grid5{grid-template-columns:repeat(2,1fr)}.engine article{border-bottom:1px solid var(--pg-line)}.swatches{grid-template-columns:repeat(3,1fr)}.gallery{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:760px){body{font-size:16px}.shell{width:min(calc(100% - 34px),var(--pg-shell))}.top .shell{display:block;padding:12px 0}.logo-type{display:block;margin-bottom:8px}.nav{margin:0;padding-bottom:4px;gap:17px}.hero{min-height:600px}.hero .shell{padding:75px 0 38px}.hero h1{font-size:clamp(5.3rem,20vw,8.5rem);margin-bottom:35px}.hero-bottom{display:block}.hero-meta{text-align:left;margin-top:25px}.section{padding:73px 0}.section-head{display:block;margin-bottom:35px}.section-head h2{margin-top:14px}.grid2,.grid3,.grid4,.grid5,.route,.trilogy,.typepair,.gallery,.sourcegrid{grid-template-columns:1fr}.trilogy>div{border-right:0;border-bottom:1px solid var(--pg-line)}.trilogy>div:last-child{border:0}.swatches{grid-template-columns:repeat(2,1fr)}.swatch{min-height:140px}.timeline{grid-template-columns:92px 1fr}.timeline>div:nth-child(3n){grid-column:2;padding-top:0}.timeline>div:nth-child(3n-1){border-bottom:0}.footer{display:block}.footer p{margin:12px 0}.route{gap:15px;margin-bottom:52px}}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  @media print{.top,.skip{display:none!important}.hero{min-height:0}.hero .shell{padding:25px 0}.hero h1{font-size:80px}.section{padding:35px 0;break-inside:avoid}.panel,.route,.sample{break-inside:avoid}.shell{width:100%}body{color:#171512;background:#fff}.section,.light{background:#fff;color:#171512}}
}