/* ---------- tokens: light is the base, both dark paths redefine only these ---------- */
:root{
  --ground:#F0EDE7;
  --surface:#FBF9F6;
  --surface-2:#E7E2D8;
  --ink:#241D18;
  --ink-2:#5C5248;
  --ink-3:#8B8175;
  --line:#D6CFC3;
  --line-2:#C0B7A8;
  --brass:#9C6B2F;
  --brass-soft:#C9A063;
  --pine:#2C5551;
  --walnut-a:#4A3426;
  --walnut-b:#6B4A32;
  --walnut-c:#8A6242;
  --lam:#D9D3C6;
  --poly:#EDE8E0;
  --shadow:rgba(36,29,24,.13);

  direction:rtl;
  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.4rem + .95vw,2.15rem);
  --step-3:clamp(2.1rem,1.7rem + 1.9vw,3.3rem);
  --step-4:clamp(2.7rem,2rem + 3.2vw,4.8rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#171310;
    --surface:#211C18;
    --surface-2:#2C2520;
    --ink:#EFE8DE;
    --ink-2:#BFB4A6;
    --ink-3:#8C8175;
    --line:#382F28;
    --line-2:#4A3F36;
    --brass:#D2A45F;
    --brass-soft:#8F6B36;
    --pine:#6FA9A2;
    --walnut-a:#3A281D;
    --walnut-b:#573C28;
    --walnut-c:#7A5638;
    --lam:#494138;
    --poly:#332C26;
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#171310;
  --surface:#211C18;
  --surface-2:#2C2520;
  --ink:#EFE8DE;
  --ink-2:#BFB4A6;
  --ink-3:#8C8175;
  --line:#382F28;
  --line-2:#4A3F36;
  --brass:#D2A45F;
  --brass-soft:#8F6B36;
  --pine:#6FA9A2;
  --walnut-a:#3A281D;
  --walnut-b:#573C28;
  --walnut-c:#7A5638;
  --lam:#494138;
  --poly:#332C26;
  --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.75rem)}
h1,h2,h3{font-family:"Frank Ruhl Libre","Times New Roman",serif;text-wrap:balance;margin:0;line-height:1.12;font-weight:700}
p{margin:0}
a{color:inherit}

/* Hebrew has no uppercase and loses legibility when tracked out, so the eyebrow
   stays in the body face with only a hint of spacing */
.eyebrow{
  font-family:"Assistant",system-ui,sans-serif;font-weight:600;
  font-size:var(--step--1);letter-spacing:.03em;
  color:var(--brass);
}

/* ---------- masthead ---------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.4rem;border-bottom:1px solid var(--line);
}
.mark{display:flex;align-items:center;gap:.7rem}
.mark i{
  display:block;width:20px;height:52px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--walnut-c),var(--walnut-a));
  border-inline-end:4px solid var(--brass);
}
.mark b{
  display:block;font-family:"Frank Ruhl Libre",serif;font-weight:900;
  font-size:2rem;letter-spacing:-.015em;line-height:1.05;
}
.mark small{
  display:block;font-size:.9rem;letter-spacing:.05em;color:var(--ink-3);
  font-weight:600;margin-top:.18rem;
}
.themeBtn{
  font:inherit;font-size:var(--step--1);color:var(--ink-2);cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;padding:.32rem .9rem;
}
.themeBtn:hover{border-color:var(--brass);color:var(--ink)}
.themeBtn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.6rem,6vw,4.6rem) clamp(1.6rem,3vw,2.4rem)}
.hero h1{font-size:var(--step-4);font-weight:900;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero .lede{margin-top:1.3rem;max-width:56ch;font-size:var(--step-1);color:var(--ink-2);font-weight:300;line-height:1.5}
/* the manufacturer is a credential under the claim, not the page's own name */
.hero .source{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  max-width:46ch;font-size:var(--step--1);color:var(--ink-3);letter-spacing:.01em;
}
.hero .source strong{color:var(--ink-2);font-weight:700}
.heroGrid{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:1fr}
@media (min-width:900px){.heroGrid{grid-template-columns:1.05fr .95fr;align-items:end}}

/* the fan-deck of specimens */
.deck{display:flex;gap:.55rem;align-items:flex-end;min-height:210px}
.chip{
  flex:1;border-radius:3px 3px 2px 2px;position:relative;
  box-shadow:0 10px 22px -14px var(--shadow);
  border:1px solid var(--line-2);
  display:flex;align-items:flex-end;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.chip:nth-child(1){height:150px}
.chip:nth-child(2){height:185px}
.chip:nth-child(3){height:165px}
.chip:nth-child(4){height:205px}
.deck:hover .chip{transform:translateY(6px)}
.deck .chip:hover{transform:translateY(-10px)}
.chip span{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.09em;
  padding:.3rem .45rem;color:#F4EFE7;background:rgba(20,15,12,.55);
  border-radius:2px;margin:.4rem;backdrop-filter:blur(2px);
}
/* CSS-drawn materials: veneer grain, flat laminate, wrapped polymer */
/* Veneer grain: three repeating gradients at slightly different periods so the
   lines drift in and out of phase instead of reading as even corduroy ribs. */
.m-veneer{
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.13) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(92.6deg,rgba(255,255,255,.05) 0 2px,transparent 2px 17px),
    repeating-linear-gradient(91.4deg,rgba(0,0,0,.06) 0 3px,transparent 3px 29px),
    linear-gradient(163deg,var(--walnut-c),var(--walnut-a));
}
.m-oak{
  background:
    repeating-linear-gradient(88.5deg,rgba(92,58,28,.16) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(89.2deg,rgba(255,255,255,.07) 0 2px,transparent 2px 19px),
    repeating-linear-gradient(87.8deg,rgba(92,58,28,.07) 0 3px,transparent 3px 33px),
    linear-gradient(170deg,#C99C64,#96693C);
}
/* Laminate reads as a solid pressed sheet - flat, with a faint sheen across it */
.m-lam{
  background:
    linear-gradient(104deg,rgba(255,255,255,.16) 0 38%,transparent 62%),
    linear-gradient(168deg,var(--lam),color-mix(in srgb,var(--lam) 76%,var(--ink)));
}
/* Polymer is a stretched film - one soft highlight where the vacuum pulled it */
.m-poly{
  background:
    radial-gradient(115% 85% at 28% 12%,rgba(255,255,255,.42),transparent 58%),
    linear-gradient(168deg,var(--poly),color-mix(in srgb,var(--poly) 72%,var(--ink)));
}
/* the edge band - the whole professional point, drawn literally */
.chip::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:7px;
  border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.22));
  mix-blend-mode:overlay;
}
.deckCap{
  margin-top:.85rem;font-family:"IBM Plex Mono",monospace;font-size:var(--step--1);
  color:var(--ink-3);letter-spacing:.03em;
}

/* ---------- rule of facts ---------- */
.facts{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  border-block:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.6rem);
}
.fact{padding:1.3rem 1.1rem;border-inline-start:1px solid var(--line)}
.fact:first-child{border-inline-start:0}
.fact b{display:block;font-family:"Frank Ruhl Libre",serif;font-size:var(--step-2);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:.4rem;font-size:var(--step--1);color:var(--ink-3)}

/* ---------- specimen rows ---------- */
.section{padding-block:clamp(3rem,7vw,5.2rem)}
.sectionHead{max-width:62ch;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.sectionHead h2{font-size:var(--step-3);margin-top:.5rem;letter-spacing:-.015em}
.sectionHead p{margin-top:.9rem;color:var(--ink-2);font-weight:300;font-size:var(--step-1);line-height:1.55}

.spec{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
@media (min-width:820px){
  .spec{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .spec.flip .panel{order:2}
}
.panel{
  aspect-ratio:4/3;border-radius:4px;position:relative;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:0 18px 40px -26px var(--shadow);
}
/* the material fill is a sibling that comes after .band in the DOM, so the
   edge band, routed frame and tag are lifted above it explicitly */
.panel .band,.panel .tag,.panel .frame{z-index:2}
.panel .band{
  position:absolute;inset-block:0;inset-inline-start:0;width:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(0,0,0,.26));
  border-inline-end:1px solid rgba(0,0,0,.22);
}
.panel .tag{
  position:absolute;inset-block-end:.7rem;inset-inline-end:.7rem;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  color:#F6F1E9;background:rgba(20,15,12,.58);padding:.32rem .55rem;border-radius:2px;
}
/* routed frame, only on the polymer panel - it is what a router actually leaves */
.panel.routed .frame{position:absolute;inset:13%;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),inset 0 2px 5px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.38)}

.spec h3{font-size:var(--step-2);letter-spacing:-.01em}
.spec .body{color:var(--ink-2);margin-top:.85rem;max-width:58ch;font-weight:300;line-height:1.6}
.attrs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem;padding:0;list-style:none}
.attrs li{
  font-family:"IBM Plex Mono",monospace;font-size:var(--step--1);
  border:1px solid var(--line);border-radius:999px;padding:.26rem .75rem;color:var(--ink-2);
  background:var(--surface);
}
.attrs li.key{border-color:var(--brass);color:var(--brass)}

/* ---------- comparison table ---------- */
.tableWrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--step--1)}
caption{text-align:start;padding:1rem 1.1rem .3rem;color:var(--ink-3);font-size:var(--step--1)}
th,td{text-align:start;padding:.85rem 1.1rem;border-top:1px solid var(--line);vertical-align:top}
thead th{
  border-top:0;font-family:"IBM Plex Mono",monospace;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;font-size:.7rem;color:var(--ink-3);
  background:var(--surface-2);
}
tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
td{color:var(--ink-2)}

/* ---------- ordering sequence (a real sequence, hence numbered) ---------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
/* --n lets a page with four steps avoid an empty fifth column */
@media (min-width:760px){.steps{grid-template-columns:repeat(var(--n,5),1fr)}}
.step{background:var(--surface);padding:1.5rem 1.2rem}
.step b{
  font-family:"IBM Plex Mono",monospace;color:var(--brass);font-size:var(--step--1);
  letter-spacing:.1em;display:block;margin-bottom:.6rem;
}
.step h4{margin:0 0 .35rem;font-family:"Frank Ruhl Libre",serif;font-size:1.15rem;font-weight:700}
.step p{font-size:var(--step--1);color:var(--ink-2);line-height:1.55}

/* ---------- cta ---------- */
.cta{
  background:var(--ink);color:var(--ground);border-radius:6px;
  padding:clamp(2rem,5vw,3.4rem);margin-block:clamp(2.5rem,5vw,4rem);
  display:grid;gap:2rem;
}
@media (min-width:840px){.cta{grid-template-columns:1.2fr .8fr;align-items:center}}
.cta h2{font-size:var(--step-3);color:var(--ground);letter-spacing:-.015em}
.cta p{margin-top:.9rem;color:var(--ink-3);max-width:46ch;font-weight:300}
:root[data-theme="dark"] .cta p,
:root:not([data-theme="light"]) .cta p{color:var(--ink-2)}
/* trade terms sit apart from the invitation above them - a separate promise */
.cta p.trade{
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18);
  color:var(--brass-soft);font-weight:600;max-width:40ch;
}
:root[data-theme="dark"] .cta p.trade,
:root:not([data-theme="light"]) .cta p.trade{color:var(--brass)}
.btns{display:flex;flex-direction:column;gap:.7rem}
.btn{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.3rem;border-radius:4px;text-decoration:none;font-weight:600;
  border:1px solid rgba(255,255,255,.22);color:var(--ground);
  transition:transform .18s ease,background .18s ease;
}
.btn small{font-family:"IBM Plex Mono",monospace;font-weight:400;opacity:.72;font-size:.78rem;direction:ltr}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#1A120A}
.btn.primary small{opacity:.75}
.btn:hover{transform:translateX(-4px)}
.btn.primary:hover{background:var(--brass-soft)}
.btn:focus-visible{outline:2px solid var(--brass-soft);outline-offset:3px}

footer{border-top:1px solid var(--line);padding-block:2rem 3rem;color:var(--ink-3);font-size:var(--step--1)}
footer .row{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- print / PDF ----------
   The whole design is carried by backgrounds - the veneer grain, the laminate
   sheen, the dark CTA. Chrome drops those on paper unless colour adjust is
   forced, so without this block the PDF comes out as text on white. */
@media print{
  :root{
    --ground:#FFFFFF;--surface:#FBF9F6;--surface-2:#EFEAE1;
    --ink:#241D18;--ink-2:#5C5248;--ink-3:#7E7367;
    --line:#D6CFC3;--line-2:#BDB3A4;
    --brass:#8A5D26;--brass-soft:#C9A063;
    --lam:#D9D3C6;--poly:#EDE8E0;
    --shadow:rgba(0,0,0,.18);
  }
  *,*::before,*::after{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    transition:none!important;
  }
  .themeBtn{display:none}
  .hero{padding-block:1.2rem 1rem}
  .section{padding-block:1.4rem}
  .spec{padding-block:1.2rem}
  .cta{margin-block:1.2rem}
  /* keep a specimen, the table, the step strip and the CTA each on one page */
  .spec,.steps,.step,.tableWrap,.cta,.facts,.deck{break-inside:avoid;page-break-inside:avoid}
  .sectionHead{break-after:avoid;page-break-after:avoid}
  a{text-decoration:none}
  .btn:hover,.chip:hover,.deck:hover .chip{transform:none}
  footer{border-top:1px solid var(--line)}
}
@page{size:A4;margin:14mm 12mm}
/* ---------- shared across the shivuk product family ---------- */
/* the mark doubles as the way home once there is more than one page */
a.mark{text-decoration:none;display:flex;align-items:center;gap:.7rem}
a.mark:hover b{color:var(--brass)}

/* category strip under the masthead - present on every child page so a
   carpenter who landed on one product can see the other three */
.subnav{
  display:flex;flex-wrap:wrap;gap:.35rem .4rem;align-items:center;
  padding-block:.8rem;border-bottom:1px solid var(--line);
  font-size:var(--step--1);
}
.subnav a{
  text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.24rem .8rem;
  transition:border-color .18s ease,color .18s ease;
}
.subnav a:hover{border-color:var(--brass);color:var(--ink)}
.subnav a[aria-current="page"]{border-color:var(--brass);color:var(--brass);font-weight:600}
.subnav a.home{border-style:dashed;color:var(--ink-3)}
.subnav a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---------- spotlight band ----------
   For a product family that has to be seen before the carpenter starts
   reading - it sits on its own warm ground so it cannot be skimmed as body
   copy. Deliberately NOT .ask: that class means "this page admits what it
   does not know yet", which is the opposite of an announcement. */
:root{--spot-bg:#F6EFE0;--spot-line:#D9BA84;--spot-ink:#3A2A12}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--spot-bg:#2B2318;--spot-line:#7F5F30;--spot-ink:#F1E6D1}
}
:root[data-theme="dark"]{--spot-bg:#2B2318;--spot-line:#7F5F30;--spot-ink:#F1E6D1}

.spot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.1rem 1.8rem;
  background:var(--spot-bg);border:1px solid var(--spot-line);border-radius:6px;
  padding:clamp(1.3rem,3vw,2rem) clamp(1.2rem,3vw,2.1rem);
  margin-block:clamp(1.6rem,4vw,2.6rem);
}
/* 20rem basis, so at narrow widths the two halves stack instead of squeezing */
.spotMain{flex:1 1 20rem;min-width:0}
.spotSide{flex:0 1 14rem;display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.spot .eyebrow{color:var(--brass)}
.spot h2{
  margin-top:.4rem;font-size:var(--step-2);letter-spacing:-.015em;
  color:var(--spot-ink);font-weight:900;
}
.spot h2 strong{font-weight:900;color:var(--brass)}
.spot .spotBody{margin-top:.7rem;max-width:52ch;color:var(--spot-ink);opacity:.86;line-height:1.55}
.spot .spotBody strong{opacity:1;font-weight:700}
.spotAsk{font-size:var(--step-1);font-weight:700;color:var(--spot-ink);line-height:1.3}
.spotAsk strong{color:var(--brass);font-weight:900}
.spotBtn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:var(--step--1);
  background:var(--brass);border:1px solid var(--brass);color:#1A120A;
  border-radius:4px;padding:.62rem 1.15rem;transition:background .18s ease;
}
.spotBtn:hover{background:var(--brass-soft)}
.spotBtn:focus-visible{outline:2px solid var(--spot-ink);outline-offset:3px}

/* this block has to sit AFTER the two dark paths above, or a laptop set to
   dark mode would print the band in dark brown on paper */
@media print{
  :root{--spot-bg:#F6EFE0;--spot-line:#C6A878;--spot-ink:#3A2A12}
  .spot{break-inside:avoid;page-break-inside:avoid}
  .spotBtn{display:none}
}

/* a line that admits what is not on the page yet instead of inventing it */
.ask{
  margin-top:1.4rem;padding:.9rem 1.1rem;border-inline-start:3px solid var(--brass);
  background:var(--surface);border-radius:0 4px 4px 0;
  font-size:var(--step--1);color:var(--ink-2);max-width:60ch;
}

@media print{.subnav{display:none}}