/* ============================================================ DRAPER — "CARET" DESIGN SYSTEM Concept prototype. Stacey Rice. Brand (fixed, from Draper's external style guide): Orange #FF4611 · Black #10181F · White #FFFFFF Tested ratios: Ink/White 17.91 · Ink/Orange 5.23 · Orange/White 3.42 Ink/Tertiary 6.04 · White/Orange 3.42 · White/Tertiary 2.96 Rules that follow: Orange never carries body text on white. Text on orange fields is Ink, never White. White carets only on true Draper Orange, never on the tertiary. Minimum type size anywhere: 16px. Shared by index.html and capability.html. Interior pages carry class="page-capability" on to tighten the section rhythm. ============================================================ */ :root{ /* Brand — from Draper external style guide */ --orange:#FF4611; /* primary — carries the caret and display type */ --orange-3:#FF6333; /* tertiary — large fields only. Ink 6.04:1; white 2.96:1 fails, so no white caret here */ --ink:#10181F; --paper:#FFFFFF; /* Extended interface palette — each value contrast-tested */ --paper-2:#EFEBE3; /* warm neutral, one step below paper-3 */ --paper-3:#F6F4EE; /* warm ground — ink 16.28:1, ink-mute 6.42:1 */ /* tint of Draper Black, not a warm cream */ --rule:#DBD5C9; /* warm hairline */ --ink-mute:#4E5A65; /* 7.06:1 on white */ --orange-text:#B82D08; /* 6.15:1 on white — orange at body size */ --measure:62ch; --gutter:clamp(1.25rem,5vw,4.5rem); --bar:clamp(3.5rem,7vw,6rem); --tilepad:clamp(1rem,1.8vw,1.75rem); --section-y:clamp(3.5rem,8vw,6.5rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-variation-settings:'wdth' 100,'wght' 400; font-size:clamp(1rem,.96rem + .2vw,1.0625rem); line-height:1.6; font-variant-numeric:tabular-nums; } h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.02em;text-wrap:balance} p{margin:0} a{color:inherit} :focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:1px; } /* Orange ring is 1.15:1 on the tertiary band — ink reads 6.04:1 there */ .section-orange :focus-visible{outline-color:var(--ink)} .skip{ position:absolute;left:var(--gutter);top:-6rem;z-index:99; background:var(--ink);color:var(--paper); padding:.75rem 1.25rem;text-decoration:none; transition:top .15s; } .skip:focus{top:1rem} .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0 } .wrap{ max-width:82rem;margin:0 auto; padding-inline:var(--gutter); } .frame{position:relative;overflow:hidden;background:var(--ink);display:block;min-height:6rem} .frame::before{ content:"";position:absolute;inset:0;background:linear-gradient(148deg,#0B1218 0%,#1C2833 58%,#3A2419 100%) } .frame .ghost{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;height:auto;color:var(--orange);opacity:.2 } .frame img{ position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover } .shotnote{ display:none;position:absolute;z-index:3;inset:auto 0 0 0;padding:.85rem 1rem;background:rgba(11,18,24,.74);color:var(--paper);font-size:1rem;line-height:1.35 } .shotnote .caret{color:var(--orange);width:.5em;height:.47em;margin-right:.45em} .frame.is-empty .shotnote{display:block} .frame-wide{aspect-ratio:24/9} .frame-tile{aspect-ratio:4/3;margin-bottom:1.25rem} .area:nth-child(2) .frame-tile img{object-position:18% center} .area:nth-child(3) .frame-tile img{object-position:30% center} .frame-thumb{aspect-ratio:3/2} .frame-tall{aspect-ratio:4/5} .frame-story{aspect-ratio:3/2} .frame-story img{object-position:50% 40%} .frame-band{aspect-ratio:3/1;margin:clamp(2.25rem,5vw,3.5rem) 0 0} .frame-band img{object-position:50% 44%} .sprite{position:absolute;width:0;height:0;overflow:hidden} .caret{ display:inline-block;width:.765em;height:.72em; fill:currentColor;flex:none; vertical-align:baseline; } .masthead{ border-bottom:1px solid var(--rule);position:relative;z-index:30;background:var(--paper) } .masthead .wrap{ display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem); min-height:var(--bar); } .wordmark{ display:flex;align-items:center;justify-content:flex-start; text-decoration:none;color:var(--ink); margin-right:auto; } .logo{ display:block;flex:none;height:clamp(1.15rem,1.9vw,1.5rem);width:auto;aspect-ratio:1800/219 } .nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)} .nav a:not(.btn){ text-decoration:none; font-variation-settings:'wght' 500; font-size:1rem; padding:.55rem 0; border-bottom:2px solid transparent; transition:border-color .12s,color .12s; } .nav a:not(.btn):hover{color:var(--orange-text);border-bottom-color:var(--orange)} .btn{ display:inline-flex;align-items:center;gap:.5em; padding:.7rem 1.35rem;min-height:44px; text-decoration:none; font-size:1rem; font-variation-settings:'wght' 650; text-transform:uppercase;letter-spacing:.065em; border:2px solid var(--ink); transition:background .14s,color .14s,border-color .14s; } .btn-primary{background:var(--orange);border-color:var(--orange);color:var(--ink)} .btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .btn-ghost{background:transparent;color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} .menu-btn{ display:none;align-items:center;justify-content:center; width:44px;height:44px;padding:0; background:none;border:1px solid var(--ink-mute); color:var(--ink);cursor:pointer; } .menu-btn svg{width:20px;height:14px;fill:currentColor} .hero{padding:0} .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:stretch; gap:clamp(2rem,4vw,4.5rem); padding-left:max(var(--gutter), calc((100vw - 82rem)/2 + var(--gutter))); } .hero-content{ padding-block:clamp(3rem,7vw,5.5rem); align-self:center; max-width:44rem; } .hero-eyebrow{ display:flex;align-items:center;gap:.6em; font-variation-settings:'wght' 600; font-size:clamp(1rem,1.4vw,1.125rem); color:var(--ink-mute);margin-bottom:clamp(1.25rem,3vw,2rem); } .hero-eyebrow .caret{color:var(--orange)} .hero h1{ font-variation-settings:'wdth' 116,'wght' 800; font-size:clamp(2.5rem,5.6vw,5.25rem); line-height:.94;letter-spacing:-.028em; color:var(--orange); /* display scale only — 3.42:1 passes ≥24px */ max-width:14ch; } .hero-body{margin-top:clamp(1.75rem,3.5vw,2.5rem)} .hero-body p{ max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.1875rem);color:var(--ink-mute) } .hero-actions{ display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.5rem,3vw,2.25rem) } .hero-figure{margin:0;min-height:clamp(24rem,42vw,36rem);height:100%} .hero-figure img{object-position:100% center} .breadth{border-top:1px solid var(--ink);background:var(--paper-3)} .breadth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .breadth-grid{margin-inline:calc(-1 * var(--tilepad))} .area{padding-inline:var(--tilepad);border-right:1px solid var(--rule)} .area:last-child{border-right:0} .area h2{ font-variation-settings:'wdth' 104,'wght' 700;font-size:clamp(1.0625rem,1.7vw,1.375rem);margin-bottom:.5rem } .area h2 a{display:flex;align-items:baseline;gap:.5em;text-decoration:none} .area h2 .caret{color:var(--orange);width:.58em;height:.55em} .area h2 a:hover{color:var(--orange-text)} .area p{font-size:1rem;color:var(--ink-mute);line-height:1.5} .proof{ display:block;margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--rule);text-decoration:none } .proof-label{ display:block;font-size:1rem;color:var(--ink-mute);margin-bottom:.3rem } .proof-title{ display:flex;align-items:baseline;gap:.5em;font-variation-settings:'wght' 650;line-height:1.35 } .proof-title .caret{color:var(--orange);width:.55em;height:.52em} .proof:hover .proof-title{color:var(--orange-text)} .heritage{ display:grid;gap:clamp(1.75rem,4vw,4rem);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center } .frame-museum{aspect-ratio:3/2} .heritage h2{ font-variation-settings:'wdth' 110,'wght' 750;font-size:clamp(1.625rem,3.4vw,2.5rem);max-width:18ch;margin-bottom:1.25rem } .heritage p{color:var(--ink-mute);max-width:56ch;margin-bottom:1.15rem} .museum{ margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:1.5rem;border-top:1px solid var(--rule) } .museum h3{ display:flex;align-items:baseline;gap:.5em;font-variation-settings:'wght' 700;font-size:1.25rem;margin-bottom:.6rem } .museum h3 .caret{color:var(--orange);width:.55em;height:.52em} .section{padding-block:var(--section-y);scroll-margin-top:4rem} .section-tint{background:var(--paper-2)} .section-ink{background:var(--ink);color:var(--paper)} .section-head{ display:grid;gap:1.25rem clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; margin-bottom:clamp(2rem,4.5vw,3.25rem); } .section-head h2{ font-variation-settings:'wdth' 110,'wght' 750; font-size:clamp(1.75rem,4vw,3rem); max-width:18ch; } .section-head p{color:var(--ink-mute);max-width:46ch} .section-ink .section-head p{color:#B4BEC7} .textlink{ display:inline-flex;align-items:center;gap:.5em; color:var(--orange-text);text-decoration:none; font-variation-settings:'wght' 600; border-bottom:2px solid var(--orange); padding-bottom:2px; } .textlink .caret{transform:rotate(90deg);width:.64em;height:.6em} .textlink:hover{color:var(--ink);border-bottom-color:var(--ink)} .more{margin-top:clamp(1.75rem,3.5vw,2.5rem)} .breadth .more{margin-top:clamp(3rem,6vw,4.5rem)} .section-ink .textlink{color:var(--orange-3);border-bottom-color:var(--orange-3)} .section-ink .textlink:hover{color:var(--paper);border-bottom-color:var(--paper)} .finder{ border:2px solid var(--paper); display:grid;grid-template-columns:minmax(0,1fr) auto; } .finder input{ font:inherit;color:var(--paper);background:transparent; border:0;padding:1rem 1.25rem;min-height:56px;width:100%; } .finder input::placeholder{color:#8C99A4} .finder button{ font:inherit;font-variation-settings:'wght' 600; background:var(--orange);color:var(--ink); border:0;padding:0 1.5rem;min-height:56px;cursor:pointer; } .finder button:hover{background:var(--paper)} .facets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .facet{ font:inherit;font-size:1rem;font-variation-settings:'wght' 500; background:transparent;color:var(--paper); border:1px solid #626E7A;padding:.5rem .95rem;min-height:44px;cursor:pointer; } .facet{display:inline-flex;align-items:center;gap:.5em} .facet .caret{color:var(--orange-3);width:.5em;height:.47em} .facet[aria-pressed="true"]{ background:var(--orange);border-color:var(--orange);color:var(--ink);font-variation-settings:'wght' 650 } .facet[aria-pressed="true"] .caret{color:var(--paper)} .facet:hover{border-color:var(--paper)} .papers{list-style:none;margin:0;padding:0;border-top:1px solid #2A343E} .papers li{border-bottom:1px solid #2A343E} .papers a{ display:grid;gap:.35rem clamp(1.5rem,4vw,3rem); grid-template-columns:minmax(0,1fr) minmax(0,12rem); padding-block:1.35rem;text-decoration:none; } .papers h3{ font-variation-settings:'wght' 600; font-size:1.0625rem;line-height:1.35;max-width:52ch; } .papers a:hover h3{color:var(--orange-3)} .papers .meta{color:#8C99A4;font-size:1rem;line-height:1.4} .careers-grid{ display:grid;gap:clamp(1.75rem,4vw,3.5rem); grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; } .careers-grid h2{ font-variation-settings:'wdth' 112,'wght' 780; font-size:clamp(1.875rem,4.4vw,3.25rem); max-width:15ch; } .careers-grid p{ margin-top:1.25rem;max-width:44ch;font-size:clamp(1rem,1.4vw,1.125rem) } .roles{ list-style:none;margin:0;padding:0;border-top:1px solid rgba(16,24,31,.28) } .roles li{border-bottom:1px solid rgba(16,24,31,.28)} .roles a{ display:flex;align-items:center;gap:1rem;justify-content:space-between; padding:.95rem 0;text-decoration:none; font-variation-settings:'wght' 600; } .roles .where{font-variation-settings:'wght' 400;font-size:1rem;opacity:.85} .roles a:hover{padding-left:.5rem} .careers-actions{margin-top:1.75rem} .section-orange .btn-ghost:hover{background:var(--ink);color:var(--orange)} .independence{ display:grid;gap:clamp(1.75rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; } .independence h2{ font-variation-settings:'wdth' 110,'wght' 750; font-size:clamp(1.625rem,3.4vw,2.5rem); max-width:16ch; } .independence p{color:var(--ink-mute);max-width:var(--measure);margin-bottom:1.25rem} .foot{ background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,4.5rem) 2rem } .foot-grid{ display:grid;gap:clamp(1.75rem,4vw,3rem); grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); } .foot .wordmark{ color:var(--paper);margin-right:auto;margin-bottom:1.15rem;justify-content:flex-start } .foot .logo{height:1.6rem;width:auto;aspect-ratio:1800/219} .foot address{font-style:normal;color:#8C99A4;font-size:1rem;line-height:1.6} .foot h3{ font-variation-settings:'wght' 650;font-size:1rem; margin-bottom:.9rem; } .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:.55rem} .foot li a{color:#B4BEC7;text-decoration:none;font-size:1rem} .foot li a:hover{color:var(--orange-3)} .foot-base{ margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem; border-top:1px solid #2A343E; display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between; color:#8C99A4;font-size:1rem; } .foot-base a{color:#8C99A4} .section-orange{background:var(--orange-3);color:var(--ink)} .section-orange .caret{color:var(--ink)} .btn-primary .caret{color:var(--paper);transform:rotate(90deg);width:.5em;height:.47em} .btn-primary:hover .caret{color:var(--orange)} .wordmark.on-orange{--logo-caret:#FFFFFF} /* --- system additions --- */ .facets + .papers{margin-top:clamp(2rem,4vw,3rem)} .page-strategy{--section-y:clamp(3rem,6.5vw,5.5rem)} .page-capability{--section-y:clamp(3rem,6.5vw,5.5rem)} .pagehead h1{line-height:1.08} /* ============================================================ CAPABILITY / INTERIOR PAGES ============================================================ */ .nav a:not(.btn)[aria-current="true"]{border-bottom-color:var(--orange)} .crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:1rem;color:var(--ink-mute);margin-bottom:clamp(1.25rem,3vw,2rem) } .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--orange-text)} .crumbs .caret{transform:rotate(90deg);width:.5em;height:.47em;color:var(--rule)} .crumbs [aria-current]{color:var(--ink)} .overview-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:clamp(1.75rem,4vw,3.5rem); align-items:stretch; } .frame-side{height:100%;min-height:clamp(17rem,26vw,23rem)} .pagehead-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); column-gap:clamp(2rem,5vw,4.5rem); align-items:start; margin-top:clamp(1.5rem,3vw,2.25rem); } .pagehead-grid > h1{grid-column:1;grid-row:1;text-align:left} .pagehead-grid > .answer{grid-column:1;grid-row:2} .pagehead-grid > .spans{grid-column:1;grid-row:3} .page-mark-wrap{ grid-column:2;grid-row:1 / 4;align-self:center; display:flex;align-items:center;justify-content:center; } .page-mark{width:min(100%,24rem);min-width:6.25rem;height:auto} .frame-side img{object-position:50% 46%} .pagehead{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem)} .pagehead h1{ font-variation-settings:'wdth' 112,'wght' 780; font-size:clamp(2.25rem,5.6vw,4.25rem); letter-spacing:-.028em;max-width:15ch; } .spans{ display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin-top:clamp(1.25rem,2.5vw,1.75rem) } .span-tag{ display:inline-flex;align-items:center;gap:.45em; border:1px solid var(--orange); /* 3.42:1 on white — clears the 3:1 UI floor */ padding:.4rem .8rem; font-size:1rem;color:var(--ink);text-decoration:none; } .span-tag .caret{width:.52em;height:.49em;color:var(--orange)} .span-tag:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)} .answer{ border-left:6px solid var(--orange); padding:clamp(1.25rem,2.5vw,1.75rem) 0 clamp(1.25rem,2.5vw,1.75rem) clamp(1.25rem,2.5vw,2rem); margin-top:clamp(1.75rem,3.5vw,2.5rem); max-width:68ch; } .answer p{ font-size:clamp(1.125rem,1.9vw,1.4375rem);line-height:1.45;font-variation-settings:'wght' 450 } .subnav{ position:sticky;top:0;z-index:20;background:var(--paper);border-block:1px solid var(--rule) } .subnav .wrap{ display:flex;gap:clamp(1rem,2.4vw,2.25rem);overflow-x:auto;scrollbar-width:thin } .subnav a{ text-decoration:none;white-space:nowrap; font-size:1rem;font-variation-settings:'wght' 500; padding:1rem 0;border-bottom:2px solid transparent; } .subnav a:hover{color:var(--orange-text);border-bottom-color:var(--orange)} .page-capability .section h2{font-variation-settings:'wdth' 110,'wght' 750; font-size:clamp(1.625rem,3.4vw,2.5rem); max-width:20ch;margin-bottom:clamp(1.5rem,3vw,2.25rem);} .prose p{max-width:var(--measure);margin-bottom:1.15rem;color:var(--ink-mute)} .prose p:last-child{margin-bottom:0} .approach{border-top:1px solid var(--rule)} .approach-item{ display:grid;gap:.6rem clamp(1.5rem,4vw,3.5rem); grid-template-columns:minmax(0,22rem) minmax(0,1fr); padding-block:clamp(1.5rem,3vw,2.25rem); border-bottom:1px solid var(--rule); } .approach-item h3{ font-variation-settings:'wdth' 102,'wght' 650; font-size:clamp(1.125rem,2vw,1.4375rem); display:flex;align-items:baseline;gap:.55em; } .approach-item h3 .caret{color:var(--orange);width:.6em;height:.57em} .approach-item p{color:var(--ink-mute);max-width:56ch} .evidence{border-top:1px solid var(--rule)} .entry{ display:grid;gap:1rem clamp(1.5rem,3.5vw,3rem); grid-template-columns:minmax(0,13rem) minmax(0,9rem) minmax(0,1fr) minmax(0,20rem); align-items:start;padding-block:clamp(1.35rem,2.6vw,2rem); border-bottom:1px solid var(--rule);text-decoration:none;transition:background .14s; } .section-tint .entry:hover{background:var(--paper)} .entry-market{ font-variation-settings:'wght' 600;font-size:1rem;color:var(--ink-mute);padding-top:.3rem } .entry h3{ font-variation-settings:'wdth' 102,'wght' 650;font-size:clamp(1.0625rem,1.8vw,1.375rem);display:flex;align-items:baseline;gap:.55em } .entry h3 .caret{color:var(--orange);width:.6em;height:.57em} .entry p{color:var(--ink-mute);font-size:1rem;line-height:1.55} .entry:hover h3{color:var(--orange-text)} .disciplines{ display:grid;gap:clamp(1.25rem,3vw,2.5rem);grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);padding-top:clamp(1.5rem,3vw,2.25rem) } .disciplines h3{ font-variation-settings:'wght' 650;font-size:1.0625rem;margin-bottom:.5rem;display:flex;align-items:baseline;gap:.5em } .disciplines h3 .caret{color:var(--orange);width:.55em;height:.52em} .disciplines p{color:var(--ink-mute);font-size:1rem} .related{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink) } .related a{ display:block;padding:clamp(1.5rem,2.6vw,2.25rem) clamp(1rem,1.8vw,1.75rem) clamp(1.75rem,3vw,2.5rem);border-right:1px solid var(--rule);text-decoration:none;transition:background .14s } .related a:last-child{border-right:0} .related a:hover{background:var(--paper-2)} .related .caret{ color:var(--orange);width:1.21rem;height:1.14rem;margin-bottom:.9rem;display:block } .related h3{ font-variation-settings:'wdth' 104,'wght' 700;font-size:clamp(1.0625rem,1.7vw,1.3125rem);margin-bottom:.5rem } .related p{font-size:1rem;color:var(--ink-mute);line-height:1.5} .related a:hover h3{color:var(--orange-text)} .cta{ display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center } .cta h2{ font-variation-settings:'wdth' 112,'wght' 780;font-size:clamp(1.75rem,4vw,3rem);max-width:16ch;margin-bottom:0 } .cta p{max-width:42ch;margin-top:1rem} .cta-actions{display:flex;flex-wrap:wrap;gap:.75rem} /* ============================================================ PROTOTYPE NAVIGATION Deliberately outside the concept: a dark utility bar that sits above the Draper masthead so a reviewer can tell at a glance which navigation belongs to the design and which is the harness for reviewing it. ============================================================ */ .protobar{background:var(--ink);color:var(--paper);border-bottom:3px solid var(--orange)} .protobar .wrap{ display:flex;flex-wrap:wrap;align-items:center; gap:.6rem clamp(1rem,3vw,2rem); padding-block:.7rem; } .protobar-label{ display:inline-flex;align-items:center;gap:.5em; font-size:1rem;font-variation-settings:'wght' 650; color:var(--paper);margin-right:auto; } .protobar-label .caret{color:var(--orange);width:.5em;height:.47em} .protobar ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;margin:0;padding:0} .protobar a{ display:inline-block;color:#B4BEC7;text-decoration:none;font-size:1rem; padding:.35rem 0;border-bottom:2px solid transparent; } .protobar a:hover{color:var(--paper);border-bottom-color:var(--paper)} .protobar a[aria-current="page"]{color:var(--orange-3);border-bottom-color:var(--orange-3);font-variation-settings:'wght' 650} .protobar :focus-visible{outline-color:var(--orange-3)} /* ============================================================ STRATEGY NARRATIVE (long-form editorial template) ============================================================ */ .article-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)} .article-head h1{ font-variation-settings:'wdth' 112,'wght' 780; font-size:clamp(2.25rem,5.4vw,4rem);line-height:1;letter-spacing:-.028em; color:var(--orange);max-width:16ch;margin-bottom:clamp(1rem,2vw,1.5rem); } .article-standfirst{font-size:clamp(1.125rem,1.8vw,1.375rem);color:var(--ink-mute);max-width:52ch;line-height:1.5} .article-meta{ display:flex;flex-wrap:wrap;gap:.5rem 2rem; margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:1.25rem; border-top:1px solid var(--rule);font-size:1rem;color:var(--ink-mute); } .article-meta strong{color:var(--ink);font-variation-settings:'wght' 650} .article-grid{ display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); padding-bottom:clamp(3.5rem,7vw,6rem); } .toc{position:sticky;top:1.5rem;align-self:start} .toc h2{font-size:1rem;font-variation-settings:'wght' 650;color:var(--ink-mute);margin-bottom:.9rem} .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc} .toc li{border-top:1px solid var(--rule)} .toc a{display:block;padding:.55rem 0;text-decoration:none;font-size:1rem;line-height:1.35;color:var(--ink)} .toc a:hover{color:var(--orange-text)} .prose-body{max-width:68ch} .prose-body h2{ font-variation-settings:'wdth' 108,'wght' 750; font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.15;letter-spacing:-.02em; margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;padding-top:1.1rem; border-top:2px solid var(--ink);scroll-margin-top:1.5rem; } .prose-body h2:first-child{margin-top:0} .prose-body h3{ font-variation-settings:'wght' 700;font-size:clamp(1.0625rem,1.6vw,1.25rem); margin:2rem 0 .6rem; } .prose-body p{margin-bottom:1.1rem;color:var(--ink-mute)} .prose-body strong{color:var(--ink);font-variation-settings:'wght' 650} .prose-body em{color:var(--ink-mute)} .prose-body a{color:var(--orange-text);text-decoration:underline;text-underline-offset:2px} .prose-body a:hover{color:var(--ink)} .prose-body ul,.prose-body ol{margin:0 0 1.25rem;padding-left:1.35rem;color:var(--ink-mute)} .prose-body li{margin-bottom:.55rem} .prose-body li::marker{color:var(--orange)} .prose-body code{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.92em;background:var(--paper-3);padding:.1em .35em;color:var(--ink); } .prose-body hr{display:none} .prose-body blockquote{ margin:2rem 0;padding:1.35rem 1.5rem;background:var(--paper-3); border-left:6px solid var(--orange); } .prose-body blockquote h3{margin:0;font-size:clamp(1.375rem,2.6vw,1.875rem); font-variation-settings:'wdth' 106,'wght' 750;color:var(--ink)} .prose-body blockquote p{margin:0} .prose-body table{ width:100%;border-collapse:collapse;margin:1.5rem 0 1.75rem;font-size:1rem; } .prose-body th{ text-align:left;vertical-align:bottom;color:var(--ink); font-variation-settings:'wght' 650; border-bottom:2px solid var(--ink);padding:.6rem .9rem .6rem 0; } .prose-body td{ vertical-align:top;color:var(--ink-mute); border-bottom:1px solid var(--rule);padding:.7rem .9rem .7rem 0; } .prose-body tbody tr:hover{background:var(--paper-3)} /* ============================================================ RESPONSIVE + MOTION ============================================================ */ @media (max-width:1180px){ .entry{grid-template-columns:minmax(0,11rem) minmax(0,8rem) minmax(0,1fr)} .entry p{grid-column:2 / -1} } @media (max-width:1080px){ .breadth-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.25rem,4vw,3rem) 0 } .area:nth-child(2n){border-right:0} .disciplines,.related{grid-template-columns:repeat(2,minmax(0,1fr))} .related a:nth-child(2){border-right:0} .related a:nth-child(-n+2){border-bottom:1px solid var(--rule)} .entry{grid-template-columns:minmax(0,9rem) minmax(0,1fr)} .entry .frame{grid-row:1 / span 3} .entry-market,.entry h3,.entry p{grid-column:2} .entry-market{padding-top:0} } @media (max-width:980px){ .article-grid{grid-template-columns:minmax(0,1fr)} .toc{position:static} .toc ol{columns:2;column-gap:2rem} .nav{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--paper);border-bottom:1px solid var(--rule); padding:.5rem var(--gutter) 1.5rem; } .nav.open{display:flex} .nav a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--rule)} .nav .btn{margin-top:1rem;justify-content:center;border-bottom-width:2px} .menu-btn{display:inline-flex} .section-head,.careers-grid,.papers a{grid-template-columns:minmax(0,1fr)} .frame-band{aspect-ratio:2.2/1} .hero-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0} .hero-content{padding-inline:var(--gutter)} .hero-figure{min-height:0;aspect-ratio:16/10} .hero-figure img{object-position:100% 22%} .hero-actions{justify-content:flex-start} .section-head{align-items:start} .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .approach-item,.cta,.papers a{grid-template-columns:minmax(0,1fr)} .pagehead-grid{ grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1rem,4vw,1.75rem) } .pagehead-grid > .answer,.pagehead-grid > .spans{grid-column:1 / -1} .page-mark-wrap{grid-column:2;grid-row:1;align-self:center} .page-mark{width:clamp(6.25rem,18vw,8rem)} .overview-grid{grid-template-columns:minmax(0,1fr)} .frame-side{min-height:0;aspect-ratio:16/9} } @media (max-width:700px){ .independence{grid-template-columns:minmax(0,1fr)} .heritage{grid-template-columns:minmax(0,1fr)} .heritage .frame{aspect-ratio:16/10} } @media (max-width:640px){ .breadth-grid{grid-template-columns:minmax(0,1fr);margin-inline:0} .frame-wide{aspect-ratio:16/10} .frame-band{aspect-ratio:16/9} .area{padding-inline:0;border-right:0} .finder{grid-template-columns:minmax(0,1fr)} .foot-grid{grid-template-columns:minmax(0,1fr)} .disciplines,.related{grid-template-columns:minmax(0,1fr)} .entry{ grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:.85rem 1.1rem } .related a{border-right:0;border-bottom:1px solid var(--rule)} } @media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0;transform:translateY(14px);animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards } .reveal:nth-child(1){animation-delay:.05s} .reveal:nth-child(2){animation-delay:.16s} .reveal:nth-child(3){animation-delay:.27s} @keyframes rise{to{opacity:1;transform:none}} .frame img{transition:transform .55s cubic-bezier(.2,.7,.3,1)} .area:hover .frame img, .entry:hover .frame img{transform:scale(1.045)} .caret{transition:transform .25s cubic-bezier(.2,.7,.3,1)} .area:hover h2 .caret, .proof:hover .proof-title .caret, .entry:hover h3 .caret{transform:translateY(-4px)} .textlink:hover .caret, .btn:hover .caret{transform:rotate(90deg) translateY(-4px)} .span-tag:hover .caret{transform:translateY(-3px)} .hero-figure img{animation:settle 14s cubic-bezier(.16,.7,.3,1) forwards} @keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }