/* clymi.com — design layer. Plain CSS, no build step, no runtime dependencies.
   Tokens come from the design system's styles.css; nothing here re-defines a brand value. */

/* ---------- page shell ---------- */
html{scroll-behavior:smooth}
body{background:var(--clymi-off-white);color:var(--text-body);overflow-x:hidden}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.band{padding:clamp(72px,11vh,148px) 0;position:relative}
.band--ink{background:var(--clymi-ink)}
.band--sand{background:var(--clymi-sand);--text-muted:var(--ink-600);--text-subtle:var(--ink-600)}
.band--tight{padding:clamp(48px,7vh,88px) 0}
.band--ink h1,.band--ink h2,.band--ink h3{color:var(--clymi-off-white)}
.band--ink p{color:var(--ink-300)}
.band--sand p{color:var(--text-muted)}
.band--sand .eyebrow{color:var(--copper-700)} /* #8C4420 on Sand = 5.25:1; #AE5528 would be 3.77:1 */

/* ---------- type ---------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--clymi-copper);display:block}
.band--ink .eyebrow{color:var(--clymi-copper-light)}
.display{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(38px,6.4vw,76px);line-height:1.02;letter-spacing:var(--tracking-display);color:var(--text-strong);margin:0;text-wrap:balance}
.band--ink .display{color:var(--clymi-off-white)}
.h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:0}
.h3{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(19px,1.5vw,23px);line-height:1.25;color:var(--text-strong);margin:0}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--text-muted);max-width:46ch;margin:0}
.body{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted);max-width:60ch;margin:0}
.small{font-family:var(--font-ui);font-size:var(--text-sm);line-height:1.6;color:var(--text-muted);margin:0}
[dir="rtl"] .eyebrow{font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
[dir="rtl"] .note__label{font-family:var(--font-arabic);letter-spacing:0;text-transform:none}
[dir="rtl"] .display{line-height:1.45}
[dir="rtl"] .h2{line-height:1.42}
[dir="rtl"] .lead{max-width:44ch;line-height:1.8}
[dir="rtl"] .body{max-width:52ch}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--clymi-ink);border-bottom:1px solid rgba(249,246,243,.08)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);height:76px}
.site-head__mark{display:flex;align-items:center}
.site-head__mark img{height:20px;display:block}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.site-nav a{white-space:nowrap;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--ink-300);border-bottom:1px solid transparent;padding-bottom:2px;transition:var(--transition-control)}
.site-nav a:hover{color:var(--clymi-off-white);border-bottom-color:transparent}
.site-nav a[aria-current="page"]{color:var(--clymi-off-white);border-bottom-color:var(--clymi-copper)}
.lang{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:var(--text-xs)}
.lang a{color:var(--ink-300);letter-spacing:.06em}
.lang a:hover{color:var(--clymi-off-white)}
.lang span{width:1px;height:12px;background:rgba(249,246,243,.24)}

/* ---------- the branch motif: one stem, one node, many settings ---------- */
.branch{position:relative;height:clamp(180px,26vw,300px);margin:clamp(28px,5vw,56px) 0 0}
.branch__stem,.branch__arm{position:absolute;height:3px;border-radius:2px;background:var(--clymi-copper);transform-origin:left center}
.band--ink .branch__stem,.band--ink .branch__arm{background:var(--clymi-copper-light)}
.branch__stem{top:50%;left:0;width:34%}
.branch__node{position:absolute;top:50%;left:34%;width:11px;height:11px;border-radius:50%;background:var(--clymi-copper);transform:translate(-50%,-50%)}
.band--ink .branch__node{background:var(--clymi-copper-light)}
.branch__arm{left:34%;width:60%;opacity:.9}
.branch__arm--1{top:50%;transform:rotate(-34deg)}
.branch__arm--2{top:50%;transform:rotate(-17deg);opacity:.55}
.branch__arm--3{top:50%;transform:rotate(0deg);opacity:.35}
.branch__arm--4{top:50%;transform:rotate(17deg);opacity:.55}
.branch__arm--5{top:50%;transform:rotate(34deg)}
[dir="rtl"] .branch__stem{left:auto;right:0;transform-origin:right center}
[dir="rtl"] .branch__node{left:auto;right:34%;transform:translate(50%,-50%)}
[dir="rtl"] .branch__arm{left:auto;right:34%;transform-origin:right center}
[dir="rtl"] .branch__arm--1{transform:rotate(34deg)}
[dir="rtl"] .branch__arm--2{transform:rotate(17deg)}
[dir="rtl"] .branch__arm--4{transform:rotate(-17deg)}
[dir="rtl"] .branch__arm--5{transform:rotate(-34deg)}

/* ---------- the settings column: rooms, each with its own number ---------- */
.settings{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.setting{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--border-hairline)}
.band--ink .settings,.band--ink .setting{border-color:rgba(249,246,243,.12)}
.setting__name{font-family:var(--font-ui);font-size:clamp(15px,1.3vw,18px);font-weight:var(--weight-medium);color:var(--text-strong)}
.band--ink .setting__name{color:var(--clymi-off-white)}
.setting__who{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--text-muted);display:block;margin-top:4px}
.band--ink .setting__who{color:var(--ink-300)}
.setting__val{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.02em;color:var(--clymi-copper);flex:0 0 auto}
.band--ink .setting__val{color:var(--clymi-copper-light)}
.setting__val small{font-size:.42em;vertical-align:top;margin-inline-start:2px}
/* CLYMI-WEB-04 §4: the degree sign is ~17px (.42em) and copper #AE5528 on Sand is 3.77:1;
   --copper-700 #8C4420 on Sand is 5.25:1 (CLYMI-WEB-04 §4, verified by the G7 measurement). The frozen identity colours are untouched. */
.band--sand .setting__val small{color:var(--copper-700)}

/* ---------- layout helpers ---------- */
.stack{display:grid;gap:clamp(18px,2.4vw,30px);justify-items:start}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split--top{align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.rule{height:1px;background:var(--border-hairline);width:100%}
.band--ink .rule{background:rgba(249,246,243,.12)}

/* ---------- statement list ---------- */
.claims{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:c}
[dir="rtl"] .claims li{line-height:1.5}
.claims li{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--border-hairline);font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(18px,2vw,26px);line-height:1.3;color:var(--text-strong);letter-spacing:var(--tracking-heading)}
.claims li:last-child{border-bottom:1px solid var(--border-hairline)}
.band--ink .claims li{border-color:rgba(249,246,243,.12);color:var(--clymi-off-white)}
.claims--quiet li{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-muted)}

/* ---------- note panel: what we do not claim ---------- */
.note{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);display:grid;gap:12px;background:transparent;max-width:74ch}
.band--ink .note{border-color:rgba(249,246,243,.18)}
.note__label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-subtle)}
.band--ink .note__label{color:var(--ink-300)}

/* ---------- link as action ---------- */
.action{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--clymi-copper);border-bottom:1px solid transparent;padding-bottom:3px}
.action:hover{color:var(--copper-700);border-bottom-color:currentColor}
.band--ink .action{color:var(--clymi-copper-light)}
.band--ink .action:hover{color:var(--copper-300)}
.action i{width:15px;height:15px;background-color:currentColor;-webkit-mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;mask:url(assets/icons/arrow-right.svg) no-repeat center/contain;display:block}
[dir="rtl"] .action i{-webkit-mask-image:url(assets/icons/arrow-left.svg);mask-image:url(assets/icons/arrow-left.svg)}
.action--mail i{-webkit-mask-image:url(assets/icons/mail.svg);mask-image:url(assets/icons/mail.svg)}

/* ---------- hero ---------- */
.hero{min-height:min(88vh,860px);display:flex;align-items:center;background:var(--clymi-ink);padding:clamp(72px,12vh,140px) 0}
.hero__mark{width:clamp(96px,11vw,150px);height:auto;display:block;margin-bottom:clamp(28px,4vw,48px)}
.hero__mark path{fill:none;stroke:var(--clymi-copper-light);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}

/* ---------- footer ---------- */
.site-foot{background:var(--clymi-ink);padding:clamp(48px,7vw,80px) 0 36px}
.site-foot__in{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.site-foot__mark img{height:26px;display:block}
.site-foot__links{display:flex;gap:24px;flex-wrap:wrap}
.site-foot__links a{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--ink-300)}
.site-foot__links a:hover{color:var(--clymi-off-white)}
[dir="rtl"] .site-foot__meta span:first-child{font-family:var(--font-arabic);letter-spacing:0}
.site-foot__meta{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;color:var(--ink-300);margin-top:28px;padding-top:20px;border-top:1px solid rgba(249,246,243,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- scroll reveal ----------
   Every hidden state below is scoped to html.js, a class site.js adds as its first
   statement. No script — or a script that failed to load — means no hidden state, and
   the page renders complete. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--duration-slow) var(--ease-clymi),transform var(--duration-slow) var(--ease-clymi)}
.js .reveal.is-in{opacity:1;transform:none}
.js .branch .branch__stem{transform:scaleX(0);transition:transform 900ms var(--ease-clymi)}
.branch.is-in .branch__stem{transform:scaleX(1)}
.js .branch .branch__arm{clip-path:inset(0 100% 0 0)}
.branch.is-in .branch__arm{animation:armIn 700ms var(--ease-clymi) forwards}
.branch.is-in .branch__arm--1{animation-delay:.85s}
.branch.is-in .branch__arm--2{animation-delay:.95s}
.branch.is-in .branch__arm--3{animation-delay:1.05s}
.branch.is-in .branch__arm--4{animation-delay:1.15s}
.branch.is-in .branch__arm--5{animation-delay:1.25s}
/* clip-path only: opacity stays with the per-arm rules above, so the arms keep their
   authored weights (.9 / .55 / .35 / .55 / .9) once the wipe has run. */
@keyframes armIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.js .branch .branch__node{opacity:0;transition:opacity var(--duration-base) var(--ease-clymi) .8s}
.branch.is-in .branch__node{opacity:1}
.js .hero__mark path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.hero__mark.is-in path{animation:draw 1s var(--ease-clymi) forwards}
.hero__mark.is-in path:nth-child(2),.hero__mark.is-in path:nth-child(3){animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- responsive: the mobile composition ---------- */
@media (max-width:1080px){.site-nav{gap:18px}}
@media (max-width:900px){
  /* No script, no disclosure widget: the header simply becomes two rows and the
     navigation wraps. Every page and both languages stay reachable with JS off. */
  .site-nav a{white-space:normal}
  .split,.cols-3{grid-template-columns:minmax(0,1fr)}
  .site-head__in{height:auto;flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px;padding-bottom:16px}
  .site-nav{width:100%;flex-wrap:wrap;gap:10px 18px;margin-inline-start:0}
  .site-nav a{font-size:var(--text-sm);padding-bottom:3px}
  .hero{min-height:auto;padding:56px 0 64px}
  .branch{height:210px}
  .branch__stem{width:26%}
  .branch__node{left:26%}
  .branch__arm{left:26%;width:70%}
  [dir="rtl"] .branch__stem{right:0}
  [dir="rtl"] .branch__node{right:26%}
  [dir="rtl"] .branch__arm{right:26%}
  .setting__val{font-size:30px}
  .site-foot__in{align-items:flex-start;flex-direction:column;gap:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-in,.js .reveal{opacity:1;transform:none;transition:none}
  .branch .branch__stem,.js .branch .branch__stem{transform:scaleX(1);transition:none}
  .branch .branch__arm,.branch .branch__node,.js .branch .branch__arm,.js .branch .branch__node{opacity:.9;animation:none;transition:none;clip-path:none}
  [dir="rtl"] .js .branch .branch__arm{clip-path:none}
  .branch .branch__arm--2,.branch .branch__arm--4{opacity:.55}
  .branch .branch__arm--3{opacity:.35}
  .hero__mark path,.js .hero__mark path{stroke-dashoffset:0;animation:none}
}

/* CLYMI-WEB-04 W8 (2026-09-16) - NOT part of Clymi Design System v3; a documented deviation authorised by the Owner.
   In the one-column layout (<=900px) the two outer arms rotate +-34deg from the node and rise above the .branch
   box; from 470px to 900px inclusive (measured, w8-branch/before/measurements.txt) that rise crosses the text
   element above the motif. Inside that measured range only, the arm length is fitted to the vertical room that
   exists above the node: half the box (105px) + the .branch margin-top + the .split gap, kept ~5px clear
   (100px in place of 105px), divided by sin(34deg)=0.5592. The motif stays whole; nothing outside the range changes. */
@media (min-width:470px) and (max-width:900px){
  .branch__arm{width:calc((100px + max(28px,5vw) + max(32px,5vw)) / 0.5592)}
}

/* CLYMI-WEB-04 W10 (2026-09-17) - NOT part of Clymi Design System v3; an authorised deviation (Owner ruling CL-45, 2026-09-16):
   the footer's independent legal section (Privacy Policy - Terms of Use) below the main-navigation links. The links themselves
   reuse .site-foot__links; this one rule only sets the row apart. Measured with the existing styles alone, the row sat 0.0px
   under the navigation links with no divider at 390 / 768 / 1440 in both languages (w10-footer/before-css/measurements.txt).
   Scoped to the footer; no other layout is touched. */
.site-foot__legal{margin-top:24px;padding-top:20px;border-top:1px solid rgba(249,246,243,.12)}