/* Shared style for the pages around the Hue prototype: links, film, guide, design system, deck. */
:root{
  --blue:#3274AE; --blue-d:#285F91; --hred:#D9624F; --hyel:#EFBE46;
  --ink:#303C40; --sub:#5F6F78; --ln:#E0E7ED; --ln-d:#BFCFDB;
  --mist:#F4F8FB; --soft:#E7F0F8; --soft-b:#B4CEE6; --white:#fff;
  --amb50:#FFF3DD; --amb300:#EBCF9C; --amb800:#7F5410;
  --red50:#FDE9E7; --red300:#F0B6B0; --red700:#A3261C;
  --fd:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --fb:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(16px,4vw,56px);
  --shadow:0 10px 36px rgba(48,60,64,.13); --shadow-s:0 3px 12px rgba(48,60,64,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{background:var(--mist);color:var(--ink);font:500 18px/1.6 var(--fb);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
b,strong{font-weight:700}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blue-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border-radius:8px;z-index:99}

/* the bar at the top */
.bar{position:sticky;top:0;z-index:20;background:rgba(244,248,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.bar .in{max-width:1180px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;gap:12px;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:9px;font:800 20px/1 var(--fd);color:var(--ink);text-decoration:none}
.brand svg{width:28px;height:28px;flex:none}
.bar .name{color:var(--sub);font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar a.back{flex:none;width:44px;height:44px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;color:var(--blue-d);background:var(--soft);border:1.5px solid var(--soft-b)}
.bar a.back:hover{background:#DCE9F5}
.bar a.back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font:700 13px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.lede{font-size:clamp(19px,2.1vw,23px);line-height:1.5;color:var(--sub);max-width:60ch}
.cap{font-size:14.5px;line-height:1.5;color:var(--sub)}
.card{background:var(--white);border:1px solid var(--ln);border-radius:20px;padding:22px 24px}
.card.hi{background:var(--soft);border-color:var(--soft-b)}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 16px/1 var(--fb);text-decoration:none;border-radius:99px;padding:13px 20px;border:1.5px solid transparent}
.btn.p{background:var(--blue);color:#fff}.btn.p:hover{background:var(--blue-d)}
.btn.s{background:var(--soft);border-color:var(--soft-b);color:var(--blue-d)}.btn.s:hover{background:#DCE9F5}
/* a row of buttons: always with space between them, also when the row breaks */
.tools{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 8px}
.tools .btn{white-space:nowrap}
.foot{border-top:1px solid var(--ln);margin-top:72px;padding:28px 0 44px;color:var(--sub);font-size:14.5px;line-height:1.6}
.foot .wrap{display:grid;gap:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:6px}
.foot nav a{font-weight:600;display:inline-block;padding:6px 0}

/* long text pages: the guide and the working document */
.doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start;padding-top:36px}
.toc{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;font-size:15px;line-height:1.35;padding-right:6px}
.toc p{font:700 12px/1.3 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-bottom:10px}
.toc a{display:block;padding:7px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.toc a:hover{background:var(--soft)}
.toc a.on{background:var(--soft);color:var(--blue-d)}
.prose{min-width:0;max-width:820px}
.prose h1{font-size:clamp(34px,5.4vw,56px);font-weight:800;margin:6px 0 14px}
.prose h2{font-size:clamp(26px,3.4vw,34px);margin:56px 0 12px;padding-top:8px}
.prose h3{font-size:22px;margin:34px 0 8px}
.prose h4{font:700 17px/1.4 var(--fb);letter-spacing:0;margin:22px 0 4px}
.prose p{margin:12px 0}
.prose ul,.prose ol{margin:12px 0 12px 1.25em;display:grid;gap:6px}
.prose li{padding-left:2px}
.prose blockquote{border-left:4px solid var(--hyel);padding:4px 0 4px 16px;margin:16px 0;color:var(--ink);font-weight:600}
.prose .tw{overflow-x:auto;margin:16px 0;border:1px solid var(--ln);border-radius:16px;background:var(--white);-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.45;min-width:520px}
.prose th{text-align:left;font:700 13px/1.3 var(--fb);letter-spacing:.04em;text-transform:uppercase;color:var(--blue-d);background:var(--soft);padding:11px 14px;white-space:nowrap}
.prose td{padding:11px 14px;border-top:1px solid var(--ln);vertical-align:top}
.prose td:first-child{font-weight:700}
.prose figure{margin:20px 0}
.prose figcaption{font-size:14.5px;color:var(--sub);margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--ln);margin:40px 0}
.meta{color:var(--sub);font-size:15px}
@media(max-width:900px){
  .doc{grid-template-columns:1fr;gap:8px;padding-top:20px}
  .toc{position:static;max-height:none;border:1px solid var(--ln);border-radius:16px;background:var(--white);padding:0}
  .toc details{padding:4px 8px 8px}.toc summary{font:700 15px/1 var(--fb);padding:12px 8px;cursor:pointer;list-style-position:inside}
  .toc p{display:none}
}
@media(min-width:901px){ .toc summary{display:none} }
@media print{ .bar,.toc,.foot nav{display:none} .doc{display:block} body{background:#fff;font-size:11.5pt} }