/* YORXEN — "One line" (direction B, chosen 24.10.2026).
   The company's world is drawn by one pen line; one window has its lamp on (the company that
   agreed), and one blue line runs from it to one named firm. Paper, ink, one blue. Everything
   here serves that drawing: type is quiet and large, structure is hairlines, colour is rare. */

@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/publicsans.woff2") format("woff2")}
@font-face{font-family:"YX Display";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/serif-display.woff2") format("woff2")}
@font-face{font-family:"YX Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/serif-text.woff2") format("woff2")}

:root{
  --paper:#E9E7E2; --paper-hi:#F3F1EC; --paper-lo:#DFDCD4;
  --ink:#17150F; --ink-2:#3B372F; --mute:#5B564C;
  --hair:rgba(23,21,15,.16); --hair-2:rgba(23,21,15,.32);
  --blue:#2F5F96; --sky:#9EC0E6; --lamp:#FBEFD2;
  --display:"YX Display","Source Serif 4",Georgia,"Times New Roman",serif;
  --serif:"YX Serif","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gut:clamp(20px,4.4vw,72px);
  --max:1320px;
  --pen:1.35px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
/* the paper has a faint tooth, so the ink sits on a material rather than on a flat colour */
body{background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ── Type: five roles ── */
.h-xl{font:600 clamp(48px,6.6vw,108px)/.94 var(--display);letter-spacing:-.03em;text-wrap:balance}
.h-l{font:600 clamp(36px,4.6vw,68px)/1 var(--display);letter-spacing:-.025em;text-wrap:balance}
.h-m{font:600 clamp(23px,2vw,27px)/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance}
.stand{font:400 clamp(21px,2.3vw,34px)/1.24 var(--serif);letter-spacing:-.01em;color:var(--ink-2);text-wrap:balance}
.label{font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
/* names of stages, sides and pages are pen notes in the margin, not capitals kicks */
.note-mark{font:400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none}
p,li,dd,figcaption{text-wrap:pretty}

/* ── Top bar ── */
nav.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:64px;padding:0 var(--gut);background:color-mix(in srgb,var(--paper) 86%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
nav.top .brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-weight:650;font-size:14px;letter-spacing:.2em}
nav.top .links{display:flex;gap:4px 28px;font-size:14.5px;color:var(--ink-2)}
nav.top .links a{position:relative;display:flex;align-items:center;min-height:44px;text-decoration:none}
nav.top .links a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
nav.top .links a:hover::after,nav.top .links a[aria-current]::after{transform:scaleX(1)}
nav.top .links a[aria-current]{color:var(--ink)}
.nav-toggle{display:none;position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--ink)}
.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{position:absolute;left:12px;width:20px;height:1.5px;background:currentColor;content:"";transition:transform .3s,top .3s,opacity .2s}
.nav-toggle i{top:21px}.nav-toggle i::before{left:0;top:-6px}.nav-toggle i::after{left:0;top:6px}
nav.open .nav-toggle i{background:transparent}
nav.open .nav-toggle i::before{top:0;transform:rotate(45deg)}
nav.open .nav-toggle i::after{top:0;transform:rotate(-45deg)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:600;font-size:15.5px;transition:background .3s,transform .3s}
.btn::after{content:"";width:24px;height:9px;background:radial-gradient(circle at calc(100% - 4.5px) 50%,var(--sky) 3.6px,transparent 4.2px),linear-gradient(var(--sky),var(--sky)) left center/calc(100% - 8px) 1.5px no-repeat;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{width:34px}
.btn:hover{background:#000;transform:translateY(-1px)}
.qlink{display:inline-flex;align-items:center;min-height:52px;padding:0;font-weight:600;font-size:15.5px;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) left calc(100% - 13px)/100% 1.5px no-repeat;transition:color .2s}
.qlink:hover{color:var(--blue)}
/* the drawn underline follows the words: the pen layer paints its own stroke, so currentColor has to be asked for */
.qlink:hover .pen-layer path{stroke:currentColor}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;text-decoration:none;color:var(--ink)}
.more::after{content:"";width:22px;height:1.5px;background:currentColor;transition:width .3s}
.more:hover{color:var(--blue)}.more:hover::after{width:34px}

/* ── Scenes: the pen drawings ── */
.scene{position:relative;margin:0}
.scene svg{width:100%;height:auto;overflow:visible}
.scene .ink path{fill:none;stroke:var(--ink);stroke-width:var(--pen);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* one pen, one weight: classing strokes by length gave the judges three or four weights */
/* no floating blur under the drawings: both judges read it as an effect detached from any object */
.scene{isolation:isolate}
.scene .tie{fill:none;stroke:var(--blue);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
/* a line that is only possible (before the company has agreed) is dotted; the pen still draws it, through a mask */
.scene .tie-mask{stroke:#fff;stroke-width:8px}
.scene .tie-dots{fill:none;stroke:var(--blue);stroke-width:2.2px;stroke-dasharray:2 8;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* agreement: the lamp comes on and the line is drawn solid (site.js adds .is-agreed); without JS the scene shows the agreed state */
.scene .tie-agree{fill:none;stroke:var(--blue);stroke-width:2.4px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.scene .agree-light{transition:opacity 1.6s ease}
.scene.is-drawing:not(.is-agreed) .agree-light{opacity:0}
.scene .tie-dots{transition:opacity .6s ease 1.2s}
.scene.is-agreed .tie-dots{opacity:0}
.scene .co{fill:var(--ink)}
.scene .fi{fill:var(--sky);stroke:var(--ink);stroke-width:var(--pen);vector-effect:non-scaling-stroke}
.scene .glow{transition:opacity 1.6s ease}
.scene .tag{position:absolute;white-space:nowrap;transition:opacity .6s ease}
.scene .tag b{display:block;font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.scene .tag.t-fi b{color:var(--blue)}
/* drawing state (set by site.js only when motion is welcome; without JS the scene is complete).
   .pp = being prepared: nothing animates into the blank state, so lights do not flash out on load */
.scene.pp,.scene.pp *{transition:none!important}
.scene.is-drawing .glow,.scene.is-drawing .tag,.scene.is-drawing .co,.scene.is-drawing .fi{opacity:0}
.scene.is-lit .glow,.scene.is-lit .co{opacity:1}
.scene.is-done .tag,.scene.is-done .fi{opacity:1}
.scene .co,.scene .fi{transition:opacity .5s ease}
/* the light-and-shadow layer under the strokes (one illustrator's wash per scene, img/tone/*.webp):
   it comes up when the pen has finished, like the lamp */
.scene>.tone{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;z-index:-1;pointer-events:none;transition:opacity 1.6s ease .1s}
/* the wash fades into the paper at the edges, so a shaded wall never ends in a hard rectangle */
.scene>.tone{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.scene.is-drawing:not(.is-lit) .tone{opacity:0}
/* in the first screen the wash is laid first and the pen draws over it (it is the largest paint: no fade, for LCP) */
.hero .scene>.tone,.ph .scene>.tone{transition:none}
.hero .scene.is-drawing .tone,.ph .scene.is-drawing .tone{opacity:1}

/* ── Sections ── */
.sec{padding:clamp(64px,8vw,120px) var(--gut)}
.sec>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p{font:400 clamp(19px,1.6vw,22px)/1.42 var(--serif);color:var(--ink-2);max-width:32ch}

/* ── Footer ── */
.foot{padding:56px var(--gut) 44px;border-top:1px solid var(--hair);font-size:14.5px;color:var(--mute)}
.foot>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.foot .f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:36px}
.foot .f-sign{display:flex;gap:12px;align-items:center;color:var(--ink)}
.foot .f-sign b{display:block;font-weight:650;letter-spacing:.2em;font-size:13px}
.foot .f-sign span{font:400 16px/1.3 var(--serif);color:var(--mute)}
.foot .f-links{display:flex;flex-wrap:wrap;gap:0 24px}
/* The nine links are about 895px wide, so under the mark they fit on one line only from about 990px. Below that
   they wrapped, and between about 820 and 990px the wrap left the address alone on its own line (measured 25.10.2026
   with the nine links of that day; the same at 861-990px as at 820-860px). There they sit beside the mark,
   right-aligned, and break into two rows of at least two links. */
@media(min-width:768px) and (max-width:990px){
  .foot .f-top{flex-wrap:nowrap}
  .foot .f-sign{flex:none}
  .foot .f-links{justify-content:flex-end}
}
.foot .f-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2)}
.foot .f-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot .f-legal{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:24px 64px;padding-top:32px;border-top:1px solid var(--hair)}
.foot dl{display:grid;grid-template-columns:136px minmax(0,1fr);gap:6px 16px}
.foot dt{color:var(--mute)}.foot dd{color:var(--ink-2);font-variant-numeric:tabular-nums}
.foot .f-disc{max-width:56ch;line-height:1.7}
.foot .f-disc b{color:var(--ink-2);font-weight:600}
.foot .f-disc+.f-disc{margin-top:10px}

/* ── Phone ── */
@media(max-width:860px){
  body{font-size:16px}
  nav.top .links{display:none}
  .nav-toggle{display:block}
  /* open: the brand row keeps its place (10px down, as in the closed 64px bar) instead of jumping to the top edge; on a short
     screen the sheet scrolls inside itself, so the last link can always be reached */
  nav.open{flex-wrap:wrap;background:var(--paper);align-content:flex-start;padding-top:10px;row-gap:10px;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  nav.open .links{display:flex;flex-direction:column;order:3;width:100%;gap:0;padding:8px 0 22px;border-top:1px solid var(--hair);
    font:400 26px/1.2 var(--serif);color:var(--ink)}
  nav.open .links a{min-height:56px;border-bottom:1px solid var(--hair)}
  nav.open .links a::after{display:none}
  .sec-head{grid-template-columns:1fr}
  .foot{padding:56px var(--gut) 44px}
  .foot .f-legal{grid-template-columns:1fr}
  .foot dl{grid-template-columns:128px minmax(0,1fr)}
}
/* no JavaScript on a phone: nothing could open the menu, so the toggle goes and the links sit in a second row of the bar */
@media(max-width:860px) and (scripting:none){
  .nav-toggle{display:none}
  nav.top{flex-wrap:wrap;row-gap:0;padding-bottom:6px}
  nav.top .brand svg{flex:none}
  nav.top .links{display:flex;flex-wrap:wrap;width:100%;gap:0 20px;font-size:14px}
  nav.top .links a{min-height:40px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── The pen layer (yx-pen.js): frames, rules and marks drawn by the same hand ── */
[data-pen]{position:relative}
.pen-layer{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;max-width:none!important;margin:0!important}
.pen-layer path{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
[data-pen="box"]{border:1px solid var(--hair-2)}
[data-pen="box"].pen-on{border-color:transparent}
[data-pen="rule"]{border-top:1px solid var(--hair-2)}
[data-pen="rule"].pen-on{border-top-color:transparent}
[data-pen="rule"]>.pen-layer{top:-3px}
/* rules are the quiet marks on the page: the same pen, lighter and thinner than the drawings */
[data-pen="rule"]>.pen-layer path{stroke:color-mix(in srgb,var(--ink) 52%,transparent);stroke-width:1.1}
.foot[data-pen="rule"]>.pen-layer path{stroke:var(--ink);stroke-width:1.25}
.part[data-pen="rule"]>.pen-layer path{stroke:color-mix(in srgb,var(--ink) 74%,transparent);stroke-width:1.2}
[data-pen="under"]>.pen-layer{top:auto;bottom:8px}
.qlink[data-pen="under"].pen-on{background:none}
.pen-wait>.pen-layer{opacity:0}
.pen-blue .pen-layer path{stroke:var(--blue)}

/* ── On paper ──
   An A4 sheet is about 790px wide, so a printed page gets the phone layout: the bar, the menu button and the
   drawings would take the first sheet, and folded answers would not print at all. Rules here carry !important
   because the page stylesheets that load after this one set the same properties at the same specificity.
   site.js opens every <details> for the print (beforeprint) and closes them again afterwards. */
@media print{
  html{scroll-padding-top:0}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5;overflow:visible}
  nav.top,.skip,.nav-toggle,#mail-toast,.thread,.cf-wall{display:none!important}
  /* the drawings are decoration; the introduction note is the one that carries words, so it stays */
  .scene:not(.intro-letter){display:none!important}
  .part>h2,.toc{position:static!important}
  .toc{max-height:none!important;overflow:visible!important}
  /* closed answers and the contents print open, without the plus that says they open */
  details::details-content{content-visibility:visible;display:block;height:auto}
  .qa summary::before,.qa summary::after,.toc-d summary::before,.toc-d summary::after{display:none!important}
  .qa summary{min-height:0!important;padding:10px 0!important}
  .toc-d{border-top:0!important}
  /* a button is a filled shape, and backgrounds do not print by default: it would print as paper-coloured words on white */
  .btn{background:none!important;color:#000!important;min-height:0!important;padding:0!important;text-decoration:underline}
  .btn::after,.letter-paper::before,.letter-paper::after{display:none!important}
  .letter-paper{background:none!important;box-shadow:none!important}
  /* the pen marks were drawn at the size of the screen the page was read on, and a sheet is narrower: a frame or a
     rule would cut through the words (the box round the /charges timeline). On paper the plain line they replace
     comes back, and a link, which the pen underlined, is underlined by the browser */
  .pen-layer{display:none!important}
  [data-pen="box"].pen-on{border-color:rgba(0,0,0,.45)!important}
  [data-pen="rule"].pen-on{border-top-color:rgba(0,0,0,.45)!important}
  .qlink{text-decoration:underline!important}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .trap,.fig,.qa details,.cf-sheet,figure{break-inside:avoid}
  h1,h2,h3{break-after:avoid;break-inside:avoid}
}

/* footer: the company number and ICO entry link to their registers */
.foot dd a{color:inherit;text-underline-offset:3px}