@import url("type.css");
@import url("organic/organic.css");
/* Shared base for the three direction prototypes: faces, motion tokens, access.
   Faces: Hanken Grotesk (OFL) and Conso, the two the live site ships.
   Motion tokens are generated by substrate/lib/motion.mjs tokensCss(). */
@font-face{font-family:"Hanken Grotesk";src:url("../../fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Conso";src:url("../../fonts/conso-regular.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,0.2,1);
  --ease-exit:cubic-bezier(0.4,0,1,1);
  --ease-film:cubic-bezier(0.65,0,0.35,1);
  /* measured from reference clips (feed-test-20), via motion.mjs curveFromSamples */
  --ease-engrave:linear(0 0%,0 16.67%,0.1 27.78%,0.5 42.22%,0.9 68.89%,1 100%);
  --ease-spring:linear(0,0.1132,0.3184,0.5137,0.6686,0.7812,0.8588,0.9104,0.944,0.9654,0.9788,0.9871,0.9922,0.9953,0.9972,0.9983,1);
  --dur-quick:120ms;--dur-base:200ms;--dur-slow:320ms;--dur-scene:900ms;
  /* the site's verdict colours, light */
  --verified:#0a6b61;--drift:#8f3a19;--unverifiable:#4e4d85;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--verified:#63d4ce;--drift:#e29472;--unverifiable:#b3b1e6}}
:root[data-theme="dark"]{--verified:#63d4ce;--drift:#e29472;--unverifiable:#b3b1e6}
@media (prefers-reduced-motion:reduce){:root{--dur-quick:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-scene:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;background:var(--ink);color:var(--wall,var(--paper,#fff));font:600 15px var(--sans);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
code,pre,kbd,samp{font-family:var(--mono)}
[data-verdict]{font:600 15px/1.3 var(--sans)}
[data-verdict]::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.45em;vertical-align:-.05em;background:currentColor}
[data-verdict="verified"]{color:var(--verified)}
[data-verdict="verified"]::before{border-radius:50%}
[data-verdict="drift"]{color:var(--drift)}
[data-verdict="drift"]::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
[data-verdict="unverifiable"]{color:var(--unverifiable)}
[data-verdict="unverifiable"]::before{background:none;border:2px solid currentColor}

/* Without JS every demo state shows; with JS one at a time. */
html:not(.js) [data-choices]{display:none}
html.js [data-state][hidden]{display:none}

/* Plain view: the art layer goes, the text stays. */
html.plain [data-art]{display:none!important}
html.plain *{animation:none!important;transition:none!important}

/* halftone canvas sits over its photograph and takes the container's colour */
canvas.ht{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ht-on > img[data-halftone]{visibility:hidden}

/* Lettering from non-type material (lettering.js). The text stays real; the material draws it. */
[data-letter]{position:relative;isolation:isolate}
.lettered-on{color:transparent}
.lettered-on::selection{color:var(--ink);background:color-mix(in srgb,var(--ink) 18%,transparent)}
canvas.letter-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.scrap{display:inline-block;color:transparent;background:var(--plate) var(--px,50%) var(--py,50%)/420% auto;-webkit-background-clip:text;background-clip:text;transform:rotate(var(--tilt,0deg));filter:contrast(1.5) brightness(.82) drop-shadow(0 0 .6px rgba(0,0,0,.9)) drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.scrap-word{white-space:nowrap}
html.plain .lettered-on,html.plain .scrap{color:var(--ink);background:none;transform:none;filter:none}
@media (forced-colors:active){.lettered-on,.scrap{color:CanvasText!important;background:none!important}canvas.letter-art{display:none}}
@media print{.lettered-on,.scrap{color:#000!important;background:none!important}canvas.letter-art{display:none}}
:root[data-theme="dark"] .scrap{filter:contrast(1.4) brightness(1.15) drop-shadow(0 0 1px rgba(236,229,214,.6))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scrap{filter:contrast(1.4) brightness(1.15) drop-shadow(0 0 1px rgba(236,229,214,.6))}}

/* display slots (shell/slots.js): an external lettering drawing laid over the real text */
[data-display]{position:relative;isolation:isolate}
.slot-on{color:transparent}
.slot-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.slot-art > *{width:100%;height:100%}
html.plain .slot-on{color:var(--ink)}
@media (forced-colors:active){.slot-on{color:CanvasText!important}.slot-art{display:none}}

/* living plates (the alive layer, alive): until alive.js adopts a [data-alive] element it
   shows its still; under reduced motion and in plain view it stays a still. */
[data-alive]{position:relative}
html.plain [data-alive] canvas,html.plain [data-alive] video{display:none}