/* Abrash: hand-knotted rugs in Norwood. The page is the gallery floor, honed pale limestone, with rugs laid on it. */
@font-face { font-family: "Eczar AR"; src: url(/assets/fonts/specimen/eczar-var.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Kumbh AR"; src: url(/assets/fonts/specimen/kumbh-sans-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

body.spec-abrash { margin: 0; background: #D2CDC7; }
.spec-abrash {
  --ar-indigo: #232A63; --ar-indigo-deep: #1A1F4C; --ar-indigo-lift: #2D3576;
  --ar-wool: #EFE7D6; --ar-wool-dim: #C9C3C0;
  --ar-stone: #D2CDC7; --ar-stone-img: url(/assets/work/abrash/stone.webp); --ar-stone-s: 640px; --ar-ink: #1C1D38; --ar-ink-dim: #45465C; --ar-walnut-ink: #654A2A;
  --ar-madder: #D2452B; --ar-madder-rug: #B83A24;
  --ar-walnut: #B98F4A; --ar-walnut-deep: #6E5230;
  --ar-shadow: rgba(46, 38, 30, .42);
  --ar-d: "Eczar AR", "Iowan Old Style", Georgia, serif;
  --ar-t: "Kumbh AR", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ar-m: clamp(16px, 4.2vw, 60px);
  --ar-gut: clamp(16px, 2vw, 28px);
  --ar-nav: 60px;
  --ar-ease: cubic-bezier(.2, .7, .1, 1);
  --ar-fringe: repeating-linear-gradient(90deg, var(--ar-wool) 0 1.5px, transparent 1.5px 5px);
}
.spec-abrash #spec-main {
  font-family: var(--ar-t); font-weight: 400; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.6;
  color: var(--ar-ink); background: var(--ar-stone); -webkit-font-smoothing: antialiased;
}
:where(.spec-abrash #spec-main) *, :where(.spec-abrash #spec-main) *::before, :where(.spec-abrash #spec-main) *::after { box-sizing: border-box; }
:where(.spec-abrash #spec-main) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
:where(.spec-abrash #spec-main) :where(ul, ol) { padding: 0; list-style: none; }
:where(.spec-abrash #spec-main) img { display: block; max-width: 100%; }
:where(.spec-abrash #spec-main) :where(a) { color: inherit; }
:where(.spec-abrash #spec-main) :where(button) { font: inherit; color: inherit; }
.spec-abrash #spec-main :focus-visible { outline: 2px solid var(--ar-madder); outline-offset: 3px; }
.ar-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ar-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the nav ─────────────────────────────────────────────────────── */
.ar-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--ar-nav);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); padding-inline: var(--ar-m);
  background: linear-gradient(rgba(238, 234, 227, .78), rgba(238, 234, 227, .78)), var(--ar-stone-img) 0 0 / 384px 384px, var(--ar-stone); color: var(--ar-ink);
  box-shadow: 0 1px 0 rgba(28, 29, 56, .14), 0 10px 22px -16px var(--ar-shadow);
}
.ar-nav::after { /* a selvedge: the overcast edge along the bottom of the nav */
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(101, 74, 42, .55) 0 3px, transparent 3px 5px);
}
.ar-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--ar-d); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.ar-mk { width: 28px; height: 28px; flex: none; }
.ar-links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); margin-left: auto; font-size: .9375rem; font-weight: 500; }
.ar-links a { text-decoration: none; padding: 6px 0; background: linear-gradient(var(--ar-walnut), var(--ar-walnut)) 0 100% / 0 1.5px no-repeat; transition: background-size .2s var(--ar-ease); }
.ar-links a:hover { background-size: 100% 1.5px; }
.ar-ask {
  display: inline-block; line-height: 40px; height: 40px; padding: 0 18px; white-space: nowrap; text-decoration: none;
  font-weight: 600; font-size: .9375rem; background: var(--ar-madder-rug); color: var(--ar-wool);
  box-shadow: inset 0 0 0 1px rgba(239, 231, 214, .25);
}
.ar-ask:hover { background: #A5321E; }
.ar-menu { display: none; }

@media (max-width: 820px) {
  .ar-menu {
    display: inline-flex; align-items: center; height: 40px; padding: 0 14px; margin-left: auto; cursor: pointer;
    background: transparent; border: 1px solid rgba(28, 29, 56, .35); font-weight: 600; font-size: .9375rem;
  }
  .ar-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--ar-m) 22px; background: var(--ar-wool); font-size: 1.125rem;
    background-image: repeating-linear-gradient(0deg, rgba(28, 29, 56, .04) 0 1px, transparent 1px 4px);
    box-shadow: 0 18px 30px -12px var(--ar-shadow);
  }
  .ar-links li + li { border-top: 1px solid rgba(28, 29, 56, .14); }
  .ar-links a { display: block; padding: 12px 0; }
  .ar-nav.ar-open .ar-links { display: flex; }
}
@media (max-width: 380px) { .ar-ask-more { display: none; } .ar-ask { padding: 0 14px; } .ar-brand { font-size: 19px; } }

/* ── the hero: a rug on the loom, on the gallery floor ───────────── */
.ar-loom { position: relative; }
.ar-js .ar-loom { height: 230vh; }
.ar-skip { position: absolute; left: var(--ar-m); top: 8px; z-index: 30; padding: 8px 14px; background: var(--ar-ink); color: var(--ar-wool); font-weight: 600; transform: translateY(-200%); }
.ar-skip:focus { transform: none; }
.ar-stage {
  position: sticky; top: calc(var(--bar-h, 40px) + var(--ar-nav)); overflow: hidden;
  height: calc(100svh - var(--bar-h, 40px) - var(--ar-nav)); min-height: 440px;
  isolation: isolate;
}
.ar-view { position: absolute; inset: 0; z-index: 0; outline-offset: -6px !important; touch-action: pan-y; }
.ar-view.ar-held { touch-action: none; cursor: grab; }
.ar-poster, .ar-poster img, .ar-c2d, .ar-cgl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-poster img { object-fit: cover; object-position: 70% 50%; }
.ar-pilepic { display: none; }
.ar-c2d, .ar-cgl { display: block; }
.ar-c2d { opacity: 0; }
.ar-live .ar-c2d { opacity: 1; }
.ar-live .ar-poster:not(.ar-pilepic) { visibility: hidden; }
.ar-cgl { opacity: 0; transition: opacity .3s linear; pointer-events: none; }
.ar-gl .ar-cgl { opacity: 1; }
.ar-nopile .ar-pilepic { display: block; z-index: 1; animation: ar-in .3s linear both; }
.ar-nopile .ar-c2d { visibility: hidden; }
.ar-nopile .ar-tabrow, .ar-nopile .ar-tabnote { display: none; }
@keyframes ar-in { from { opacity: 0; } }
.ar-frame { position: absolute; pointer-events: none; }

.ar-deal, .ar-copy, .ar-tools > *, .ar-warp, .ar-pills, .ar-tab { z-index: 2; }
body:not(.ar-js) .ar-tools, body:not(.ar-js) .ar-warp, body:not(.ar-js) .ar-pills, body:not(.ar-js) .ar-tab { display: none; }
body:not(.ar-js) .ar-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(226, 222, 215, .9), rgba(226, 222, 215, .7) 34%, rgba(226, 222, 215, 0) 52%); }
/* without scripting the tool isn't there, so its line and caption give way to a line about the photograph */
.ar-deal:has(.ar-still) > .ar-line:not(.ar-still), .ar-deal:has(.ar-still) > .ar-cap { display: none; }
.ar-deal, .ar-copy, .ar-sw, .ar-another { will-change: translate; }
.ar-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ar-line {
  font-family: var(--ar-d); font-weight: 700; font-size: clamp(1.25rem, .8rem + 1.9vw, 2.75rem); line-height: 1.08; letter-spacing: -.012em;
  text-wrap: balance; text-shadow: 0 0 22px rgba(236, 232, 225, .7);
}
.ar-line.ar-tie { animation: ar-tie .5s steps(9, end) both; }
@keyframes ar-tie { from { clip-path: inset(100% -4% 0 -4%); } to { clip-path: inset(-10% -4% -10% -4%); } }
.ar-cap { margin-top: 16px; max-width: 36ch; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; line-height: 1.5; color: var(--ar-walnut-ink); }

.ar-copy { will-change: translate; }
.ar-copy h1 { font-family: var(--ar-d); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.625rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.ar-sub { margin-top: 14px; max-width: 44ch; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.5; color: var(--ar-ink); text-shadow: 0 0 14px rgba(236, 232, 225, .8); }
.ar-go { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.ar-lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; font-size: .9375rem; text-decoration: none; }
.ar-lnk::before { content: ""; width: 14px; height: 10px; flex: none; background: linear-gradient(var(--ar-madder) 0 0) 0 4px / 10px 2px no-repeat, linear-gradient(var(--ar-madder) 0 0) 8px 2px / 2px 6px no-repeat, linear-gradient(var(--ar-madder) 0 0) 10px 0 / 2px 10px no-repeat; }
.ar-lnk:first-child { padding: 0 16px 0 14px; background: var(--ar-ink); color: var(--ar-wool); }
.ar-lnk:not(:first-child) { box-shadow: inset 0 -1.5px 0 var(--ar-walnut-ink); }

/* the knot-density swatches: squares cut from the rug on the loom */
.ar-sw { display: grid; grid-template-columns: auto; gap: 12px; }
.ar-swb {
  --s: 64px; position: relative; display: grid; grid-template-columns: var(--s) auto; align-items: center; gap: 12px; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.ar-swb canvas { width: var(--s); height: var(--s); display: block; image-rendering: pixelated; box-shadow: 6px 9px 18px -8px var(--ar-shadow); outline: 1px solid rgba(28, 29, 56, .18); outline-offset: -1px; transition: transform .25s var(--ar-ease); }
.ar-swb[aria-pressed="true"] canvas { outline: 2px solid var(--ar-ink); outline-offset: 3px; transform: rotate(-2deg); }
.ar-swn { font-family: var(--ar-d); font-size: 1.375rem; line-height: 1; font-weight: 500; transition: font-weight .45s var(--ar-ease); font-variant-numeric: lining-nums; }
.ar-swb[aria-pressed="true"] .ar-swn { font-weight: 800; }
.ar-swb:hover canvas { transform: rotate(-1deg) translateY(-2px); }
.ar-swcap { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ar-walnut-ink); }

.ar-another { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 4px 6px; background: none; border: 0; cursor: pointer; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.ar-tassel { width: 40px; height: 84px; overflow: visible; flex: none; }
.ar-another span { max-width: 6em; text-align: left; line-height: 1.25; }
.ar-cord { stroke: #8E2A1C; }
.ar-head { fill: var(--ar-madder-rug); }
.ar-wrap { stroke: var(--ar-walnut); }
.ar-strands { stroke: var(--ar-madder); }
.ar-swing { transform-origin: 22px 18px; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.ar-another:hover .ar-swing { transform: rotate(6deg); }
.ar-another.ar-pull .ar-swing { animation: ar-swing 1.1s cubic-bezier(.3, .5, .3, 1); }
@keyframes ar-swing { 0% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

/* fabric buttons: undyed wool tape with an overcast edge */
.ar-zb, .ar-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 0; color: var(--ar-ink); background: var(--ar-wool);
  background-image: repeating-linear-gradient(90deg, rgba(101, 74, 42, .07) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px rgba(28, 29, 56, .2), 4px 6px 14px -6px var(--ar-shadow);
}
.ar-zb::after, .ar-pill::after { /* overcast stitches along the top and bottom edges */
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; bottom: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(101, 74, 42, .5) 0 2px, transparent 2px 5px) 0 0 / 100% 1px no-repeat,
              repeating-linear-gradient(90deg, rgba(101, 74, 42, .5) 0 2px, transparent 2px 5px) 0 100% / 100% 1px no-repeat;
}
.ar-zb { width: 44px; height: 44px; }
.ar-zb svg, .ar-pill svg { width: 14px; height: 14px; flex: none; }
.ar-pill { min-height: 40px; padding: 0 14px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.ar-zb:hover, .ar-pill:hover { background-color: #E4D9C2; }
.ar-pill[aria-pressed="true"] { background-color: var(--ar-madder-rug); color: var(--ar-wool); }
.ar-zb:disabled, .ar-pill:disabled { opacity: .45; cursor: default; }

/* the warp scale: threads that spread as you come closer */
.ar-warp { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ar-track { position: relative; width: 44px; height: clamp(180px, 34vh, 340px); cursor: ns-resize; touch-action: none; }
.ar-threads { position: absolute; inset: 0; display: block; }
.ar-threads i { position: absolute; left: 6px; right: 6px; height: 1.5px; top: 0; background: var(--ar-ink); opacity: .7; border-radius: 1px; transition: transform .12s linear; }
.ar-threads i:nth-child(odd) { left: 9px; right: 3px; background: var(--ar-walnut-ink); }
.ar-threads b { position: absolute; left: -4px; right: -4px; height: 3px; background: var(--ar-madder); top: 0; }

/* the tab that holds the pile's words, once you're down in it */
.ar-tab {
  position: absolute; left: var(--ar-m); bottom: clamp(16px, 3.5vh, 36px); width: min(440px, calc(100% - 2 * var(--ar-m)));
  padding: 18px 20px 16px; background: var(--ar-wool); color: var(--ar-ink);
  box-shadow: inset 0 0 0 1px rgba(28, 29, 56, .12), 10px 16px 30px -10px var(--ar-shadow);
  visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .3s linear, transform .3s var(--ar-ease), visibility 0s .3s;
}
.ar-tab::before, .ar-tab::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--ar-walnut) 0 2px, transparent 2px 4px); opacity: .7; }
.ar-tab::before { top: -2px; } .ar-tab::after { bottom: -2px; }
.ar-down .ar-tab { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ar-tabcap { font-family: var(--ar-d); font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.ar-tabrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ar-tabnote { margin-top: 10px; font-size: .875rem; color: var(--ar-ink-dim); line-height: 1.45; }

/* ── the stage at desk widths: rug right of centre, words on the stone at left ── */
@media (min-width: 1001px) {
  .ar-frame { top: 26px; bottom: 26px; left: 42%; right: 20%; }
  /* the words sit in flow in one left-hand column, so the line and the headline can never ride over each other */
  .ar-stage { display: grid; grid-template-columns: min(31vw, 470px); grid-template-rows: auto minmax(16px, 1fr) auto; padding: clamp(22px, 5vh, 56px) 0 clamp(18px, 4vh, 40px) var(--ar-m); }
  .ar-deal { grid-area: 1 / 1; position: relative; }
  .ar-copy { grid-area: 3 / 1; position: relative; max-width: 450px; }
  .ar-tools { display: contents; }
  .ar-sw { position: absolute; left: calc(80% + 20px); top: 22%; }
  .ar-another { position: absolute; left: calc(80% + 14px); top: calc(22% + 262px); }
  .ar-pills { position: absolute; right: var(--ar-m); bottom: clamp(18px, 4vh, 40px); flex-direction: row; }
  .ar-warp { position: absolute; right: var(--ar-m); top: 50%; transform: translateY(-50%); align-items: flex-end; gap: 10px; }
  .ar-warp .ar-zb, .ar-track { margin-right: 0; }
  .ar-whole-gap { display: none; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .ar-frame { left: 40%; right: 22%; }
  .ar-line { font-size: clamp(1.25rem, .6rem + 1.9vw, 2rem); }
  .ar-swb { --s: 56px; }
  .ar-sw { left: calc(78% + 14px); }
  .ar-another { left: calc(78% + 8px); top: calc(22% + 236px); }
  .ar-another { gap: 6px; }
  .ar-another span { max-width: 4.4em; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .ar-sw { top: 16%; gap: 8px; }
  .ar-swb { --s: 52px; }
  .ar-another { top: calc(16% + 212px); }
  .ar-track { height: clamp(150px, 30vh, 260px); }
  .ar-sub { font-size: .9375rem; }
  .ar-copy h1 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
  .ar-another { gap: 6px; }
  .ar-another span { max-width: 4.4em; }
}
/* short desk screens (a laptop once the browser's own bars are taken off): tighter words, same order */
@media (min-width: 1001px) and (max-height: 720px) {
  .ar-stage { grid-template-columns: min(33vw, 470px); padding-top: clamp(18px, 3.6vh, 40px); padding-bottom: clamp(14px, 3vh, 30px); }
  .ar-line { font-size: min(clamp(1.25rem, .6rem + 1.9vw, 2.75rem), 4.6vh); }
  .ar-cap { margin-top: 10px; max-width: none; }
  .ar-sub2 { display: none; }
  .ar-copy h1 { font-size: min(clamp(1.5rem, 1rem + 1.4vw, 2.25rem), 5.2vh); }
  .ar-sub { margin-top: 10px; }
  .ar-go { margin-top: 12px; gap: 4px 20px; }
}

/* ── stacked: a row of objects on the stone, the line, the rug, then the words ── */
@media (max-width: 1000px) {
  body:not(.ar-js) .ar-stage::before { background: linear-gradient(0deg, rgba(226, 222, 215, .94), rgba(226, 222, 215, .5) 55%, rgba(226, 222, 215, .82)); }
  .ar-js .ar-loom { height: 200svh; }
  .ar-stage { display: flex; flex-direction: column; padding: 12px var(--ar-m) 14px; }
  .ar-view { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--ar-ft, 140px) - 12px), #000 calc(var(--ar-ft, 140px) + 22px)); mask-image: linear-gradient(to bottom, transparent calc(var(--ar-ft, 140px) - 12px), #000 calc(var(--ar-ft, 140px) + 22px)); }
  .ar-tools { order: 1; position: relative; display: flex; align-items: center; gap: 8px; }
  .ar-sw { display: flex; gap: 8px; }
  .ar-swb { --s: 52px; grid-template-columns: var(--s); gap: 4px; justify-items: center; }
  .ar-swn { font-size: .9375rem; }
  .ar-swcap { display: none; }
  .ar-another { gap: 0; padding: 0; margin-left: 4px; }
  .ar-another span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ar-tassel { width: 30px; height: 62px; margin-top: -6px; }
  .ar-deal { order: 2; margin-top: 10px; }
  .ar-line { font-weight: 600; font-size: clamp(1.0625rem, .8rem + 1.3vw, 1.6rem); line-height: 1.25; text-wrap: pretty; }
  .ar-cap { display: none; }
  .ar-frame { order: 3; position: relative; flex: 1 1 auto; min-height: 160px; margin-top: 16px; }
  .ar-copy { order: 4; position: relative; padding-top: 12px; }
  .ar-copy h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
  .ar-sub { margin-top: 8px; }
  .ar-go { margin-top: 10px; }
  .ar-warp { position: absolute; right: calc(var(--ar-m) + 4px); top: calc(var(--ar-ft, 140px) + 10px); align-items: flex-end; gap: 8px; }
  .ar-pills { position: absolute; right: calc(var(--ar-m) + 4px); top: calc(var(--ar-ft, 140px) + 114px); }
  .ar-pills #ar-whole { display: none; }
  .ar-zoomed .ar-pills #ar-whole { display: inline-flex; }
  .ar-track { display: none; }
  .ar-tab { bottom: 14px; }
}
@media (max-width: 700px) {
  .ar-sub2, .ar-go { display: none; }
  .ar-copy h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.75rem); }
  .ar-sub { font-size: .9375rem; }
  .ar-pills .ar-pill { min-height: 36px; padding: 0 12px; font-size: .8125rem; }
}
@media (max-width: 700px) and (max-height: 640px) {
  .ar-sub { display: none; }
  .ar-copy h1 { font-size: 1.5rem; white-space: nowrap; }
  .ar-swb { --s: 48px; }
  .ar-zb { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
  .ar-swb { --s: 44px; }
  .ar-tools { gap: 6px; }
  .ar-sw { gap: 6px; }
  .ar-zb { width: 40px; height: 40px; }
}

/* ── the floor under everything: honed limestone, 90 by 60 flags in running bond ── */
.spec-abrash #spec-main {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='720'%3E%3Cpath d='M0 .5h540M0 360.5h540M.5 0v360M270.5 360v360' stroke='%236F6860' stroke-opacity='.42'/%3E%3Cpath d='M0 1.5h540M0 361.5h540M1.5 0v360M271.5 360v360' stroke='%23fff' stroke-opacity='.4'/%3E%3C/svg%3E") 0 0 / 540px 720px,
    var(--ar-stone-img) 0 0 / var(--ar-stone-s) var(--ar-stone-s),
    var(--ar-stone);
}
@media (max-width: 700px) { .spec-abrash { --ar-stone-img: url(/assets/work/abrash/stone-sm.webp); --ar-stone-s: 420px; } }
.ar-sec { position: relative; padding: clamp(64px, 9vw, 176px) var(--ar-m); }
.ar-in { max-width: 1320px; margin: 0 auto; }
.ar-sec h2 { font-family: var(--ar-d); font-weight: 800; font-size: clamp(2.75rem, 1.4rem + 5.6vw, 7rem); line-height: .92; letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.ar-sec h3 { font-family: var(--ar-d); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -.01em; }
.ar-lead { margin-top: 28px; max-width: 62ch; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; }
.ar-note { margin-top: 20px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ar-walnut-ink); }
.ar-sec p + p { margin-top: 1em; }
.ar-jsonly { display: none; }
.ar-js .ar-jsonly { display: revert; }
.ar-btn { display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 0 24px; border: 0; cursor: pointer; text-decoration: none; font-family: var(--ar-d); font-weight: 700; font-size: 1.1875rem; background: var(--ar-madder-rug); color: var(--ar-wool); box-shadow: inset 0 0 0 1px rgba(239, 231, 214, .25), 6px 10px 20px -10px var(--ar-shadow); }
.ar-btn:hover { background: #A5321E; }

/* ── a section that is a rug: fringes at its ends, a heading band, lying a little askew ── */
@property --ar-c { syntax: "<length>"; inherits: true; initial-value: 0px; }
.ar-rs { overflow-x: clip; padding: clamp(24px, 3vw, 48px) 0; filter: drop-shadow(8px 14px 14px rgba(46, 38, 30, .38)); }
.ar-face {
  --fl: 30px; --bg: var(--ar-madder-rug); --fc: var(--ar-wool); --kl: #E4DAC4; --ks: var(--ar-madder-rug); --bk: #6E2A1E; --bk2: #3A1A1A;
  position: relative; transform: rotate(var(--tilt, 0deg));
  padding: calc(var(--fl) + clamp(64px, 8vw, 144px)) var(--ar-m);
  background:
    radial-gradient(circle, var(--fc) 2px, transparent 2.7px) 0 calc(var(--fl) - 6px) / 8px 7px repeat-x,
    radial-gradient(circle, var(--fc) 2px, transparent 2.7px) 4px calc(100% - var(--fl) + 6px) / 8px 7px repeat-x,
    repeating-linear-gradient(90deg, var(--fc) 0 1.5px, transparent 1.5px 5px) 0 7px / 100% calc(var(--fl) - 7px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 2px, var(--fc) 2px 3.3px, transparent 3.3px 9px) 0 0 / 100% var(--fl) no-repeat,
    repeating-linear-gradient(90deg, var(--fc) 0 1.5px, transparent 1.5px 5px) 1px calc(100% - 7px) / 100% calc(var(--fl) - 7px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 4px, var(--fc) 4px 5.3px, transparent 5.3px 11px) 0 100% / 100% var(--fl) no-repeat,
    linear-gradient(var(--ks), var(--ks)) 0 calc(var(--fl) + 5px) / 100% 3px no-repeat,
    linear-gradient(var(--ks), var(--ks)) 0 calc(100% - var(--fl) - 5px) / 100% 3px no-repeat,
    linear-gradient(var(--kl), var(--kl)) 0 var(--fl) / 100% 13px no-repeat,
    linear-gradient(var(--kl), var(--kl)) 0 calc(100% - var(--fl)) / 100% 13px no-repeat,
    linear-gradient(var(--bg), var(--bg)) 0 var(--fl) / 100% calc(100% - 2 * var(--fl)) no-repeat;
}
.ar-face > * { position: relative; z-index: 2; }
.ar-face::before { z-index: 1; }
.ar-face::after { z-index: 3; }

/* the corner lifts as the rug leaves: the back shows in the fold, the floor through the cut */
@keyframes ar-lift { to { --ar-c: min(22vmin, 180px); } }
@supports (animation-timeline: view()) {
  .ar-face { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ar-c)), calc(100% - var(--ar-c)) 100%, 0 100%); animation: ar-lift linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
  .ar-face::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: var(--ar-c); height: var(--ar-c); pointer-events: none;
    clip-path: polygon(0 100%, 100% 0, 0 0);
    background: linear-gradient(135deg, rgba(10, 12, 34, 0) 45%, rgba(10, 12, 34, .5)), repeating-conic-gradient(var(--bk) 0 25%, var(--bk2) 0 50%) 0 0 / 6px 6px;
  }
  .ar-back .ar-face { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ar-c) 100%, 0 calc(100% - var(--ar-c))); }
  .ar-back .ar-face::after { right: auto; left: 0; clip-path: polygon(100% 100%, 0 0, 100% 0); background: linear-gradient(225deg, rgba(10, 12, 34, 0) 45%, rgba(10, 12, 34, .45)), repeating-conic-gradient(var(--bk) 0 25%, var(--bk2) 0 50%) 0 0 / 6px 6px; }
}

/* ── Why the colour shifts: a madder rug in dye-batch bands ─────────── */
.ar-abrash .ar-face { color: var(--ar-wool); --tilt: -.5deg; --bg: var(--ar-madder-rug); --fc: #F1E9D8; --kl: #E6DCC6; --ks: #1E2A5C; --bk: #7A2C1F; --bk2: #4E1A14; }
.ar-bands { position: absolute; z-index: 0; left: 0; right: 0; top: var(--fl); height: calc(100% - 2 * var(--fl)); width: 100%; display: block; image-rendering: pixelated; opacity: 0; transition: opacity .3s linear; }
.ar-bands.ar-drawn { opacity: 1; }
.ar-abrash .ar-face::before, .ar-mend .ar-face::before { content: ""; position: absolute; left: 14px; right: 14px; top: calc(var(--fl) + 26px); bottom: calc(var(--fl) + 26px); border: 2px solid var(--gl, rgba(239, 231, 214, .55)); pointer-events: none; }
.ar-ab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); }
.ar-ab h2 { grid-column: 1 / 8; }
.ar-ab .ar-lead { grid-column: 1 / 7; margin-top: 36px; }
.ar-ab .ar-ab2 { grid-column: 8 / 12; align-self: end; margin: 0; font-size: .9375rem; line-height: 1.55; max-width: 34ch; }
.ar-big { grid-column: 2 / 13; margin-top: clamp(96px, 12vw, 200px); font-family: var(--ar-d); font-weight: 800; font-size: clamp(2rem, .9rem + 4.6vw, 5.5rem); line-height: .98; letter-spacing: -.015em; max-width: 17ch; text-wrap: balance; }
.ar-show { grid-column: 2 / 8; justify-self: start; margin-top: 40px; }

/* ── On the floor now: the pile ─────────────────────────────────────── */
.ar-sthead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); align-items: end; }
.ar-sthead h2 { grid-column: 1 / 7; }
.ar-sthead .ar-lead { grid-column: 8 / 13; margin: 0; font-size: 1.125rem; max-width: 40ch; }
.ar-stwrap { margin-top: clamp(24px, 3vw, 48px); container-type: inline-size; }
.ar-pile { display: grid; gap: 56px var(--ar-gut); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-item { min-width: 0; }
.ar-rug { position: relative; margin: 0 auto; width: min(100%, calc(var(--w) * 1.25px)); aspect-ratio: var(--w) / var(--h); box-shadow: 8px 14px 24px -10px var(--ar-shadow); }
.ar-gen { background: repeating-conic-gradient(rgba(10, 12, 34, .14) 0 25%, transparent 0 50%) 0 0 / 6px 6px, linear-gradient(var(--f), var(--f)) center / 70% 76% no-repeat, linear-gradient(#E6DCC6, #E6DCC6) center / 74% 80% no-repeat, var(--b); }
.ar-gen::before, .ar-gen::after { content: ""; position: absolute; left: 2%; right: 2%; height: 16px; background: repeating-linear-gradient(90deg, #E6DCC6 0 1.5px, transparent 1.5px 4.5px); }
.ar-gen::before { bottom: 100%; } .ar-gen::after { top: 100%; }
.ar-gen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ar-ph { overflow: hidden; box-shadow: none; }
.ar-ph img { position: absolute; max-width: none; height: auto; }
.ar-ph1 img { width: 212.8%; left: -81.9%; top: -2.1%; }
.ar-ph4 img { width: 207.5%; left: -53.1%; top: 0; height: 100%; }
.ar-dt { margin-top: 28px; }
.ar-dt h3 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); }
.ar-facts { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ar-facts div { display: contents; }
.ar-facts dt { color: var(--ar-walnut-ink); font-weight: 600; font-size: .8125rem; letter-spacing: .02em; padding-top: 2px; }
.ar-facts dd { margin: 0; color: var(--ar-ink); }
.ar-dnote { margin-top: 18px; max-width: 46ch; }
.ar-borrow { margin-top: 14px; }
.ar-stctl { display: none; }
.ar-stnote { max-width: 60ch; }

.ar-piled .ar-stwrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 0 clamp(24px, 4vw, 72px); }
.ar-piled .ar-pile { grid-column: 1 / -1; grid-row: 1 / span 2; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: inherit; align-items: center; touch-action: pan-y; }
.ar-piled .ar-pile:focus-visible { outline-offset: 12px; }
.ar-piled .ar-item { display: contents; }
.ar-piled .ar-rug { --pcm: .162cqw; grid-column: 1; grid-row: 1; width: calc(var(--w) * var(--pcm)); height: calc(var(--h) * var(--pcm)); aspect-ratio: auto; margin: calc(16 * var(--pcm)) auto; z-index: var(--z, 0); transform: translate(var(--x), var(--y)) rotate(var(--t)); cursor: pointer; }
.ar-piled .ar-dt { grid-column: 2; grid-row: 1 / span 2; margin: 0; visibility: hidden; }
.ar-piled .ar-top .ar-dt { visibility: visible; view-transition-name: ar-detail; }
.ar-piled .ar-stctl { display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1; grid-row: 2; justify-content: center; align-self: start; position: relative; z-index: 10; }
.ar-flap { position: absolute; pointer-events: none; image-rendering: pixelated; }

::view-transition-group(ar-top), ::view-transition-group(ar-flap) { animation: none; }
::view-transition-old(ar-top), ::view-transition-new(ar-top), ::view-transition-old(ar-flap), ::view-transition-new(ar-flap) { animation: none; }
::view-transition-group(ar-flap) { filter: drop-shadow(-6px -8px 10px rgba(46, 38, 30, .45)); z-index: 3; }
::view-transition-group(ar-nav) { z-index: 4; }
:root:active-view-transition-type(ar-turn)::view-transition-old(root) { display: none; }
:root:active-view-transition-type(ar-turn)::view-transition-new(root) { animation: none; }

/* ── Start with the back: an undyed rug, dark ink ───────────────────── */
.ar-back { padding-inline: 4vw; }
.ar-back .ar-face { --tilt: .4deg; --bg: var(--ar-wool); --fc: #D9CDB3; --kl: #D6C9AC; --ks: #2E3F7A; --bk: #C9BC9E; --bk2: #A89A7C; color: var(--ar-ink); padding-top: calc(var(--fl) + 13px); }
.ar-bkfig { margin: 0 calc(-1 * var(--ar-m)); }
.ar-bkfig img { width: 100%; height: auto; }
.ar-bkfig figcaption { padding: 12px var(--ar-m) 0; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: #5A4632; }
.ar-bkcopy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); margin-top: clamp(48px, 7vw, 112px); }
.ar-bkcopy h2 { grid-column: 1 / 6; }
.ar-bkp { grid-column: 7 / 13; padding-top: 10px; max-width: 58ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.ar-read { margin-top: clamp(64px, 9vw, 150px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); }
.ar-readh { grid-column: 1 / -1; }
.ar-readp { grid-column: 1 / 7; margin-top: 12px; }
.ar-words { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 28px 40px; margin-top: 32px; }
.ar-words dt button { padding: 0; border: 0; background: none; font-family: var(--ar-d); font-weight: 700; font-size: 2rem; line-height: 1; color: inherit; cursor: default; }
.ar-words dd { margin: 8px 0 0; max-width: 44ch; }
.ar-readrug { display: none; }
.ar-js .ar-words { grid-column: 1 / 7; grid-row: 3; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(56px, auto); gap: 6px 10px; align-content: start; }
.ar-js .ar-words > div { display: contents; }
.ar-js .ar-words dt { place-self: center start; }
.ar-js .ar-words dt button { cursor: pointer; font-size: var(--s); font-weight: var(--wt); line-height: .95; padding: 4px 6px; margin: -4px -6px; letter-spacing: -.01em; background: linear-gradient(var(--ar-madder-rug), var(--ar-madder-rug)) 0 100% / 0 4px no-repeat; transition: background-size .25s var(--ar-ease); }
.ar-js .ar-words dt button:hover, .ar-js .ar-words dt button[aria-pressed="true"] { background-size: 100% 4px; }
.ar-js .ar-words dt button[aria-pressed="true"] { color: var(--ar-madder-rug); }
.ar-js .ar-words dd { grid-column: 1 / -1; grid-row: 6; margin-top: 18px; padding-top: 16px; border-top: 2px solid rgba(35, 42, 99, .2); font-size: 1.0625rem; display: none; }
.ar-js .ar-words .ar-on dd { display: block; }
.ar-js .ar-words [data-w="abrash"] dt { grid-area: 1 / 1 / 2 / 4; --s: clamp(2.5rem, 1.4rem + 3vw, 4.5rem); --wt: 800; }
.ar-js .ar-words [data-w="warp"] dt { grid-area: 1 / 4 / 2 / 6; --s: 1.75rem; --wt: 500; place-self: end center; }
.ar-js .ar-words [data-w="weft"] dt { grid-area: 2 / 2 / 3 / 4; --s: 2.25rem; --wt: 600; }
.ar-js .ar-words [data-w="pile"] dt { grid-area: 2 / 4 / 4 / 7; --s: clamp(3rem, 1.6rem + 3.6vw, 5.5rem); --wt: 800; place-self: center; }
.ar-js .ar-words [data-w="knot"] dt { grid-area: 3 / 1 / 4 / 3; --s: 2.75rem; --wt: 700; }
.ar-js .ar-words [data-w="selvedge"] dt { grid-area: 4 / 1 / 5 / 4; --s: 1.625rem; --wt: 400; place-self: center end; }
.ar-js .ar-words [data-w="fringe"] dt { grid-area: 4 / 4 / 5 / 6; --s: 2.25rem; --wt: 700; }
.ar-js .ar-words [data-w="field"] dt { grid-area: 5 / 2 / 6 / 5; --s: clamp(2.25rem, 1.4rem + 2vw, 3.5rem); --wt: 600; place-self: center; }
.ar-js .ar-readrug { display: block; grid-column: 8 / 13; grid-row: 2 / span 2; margin: 0; align-self: center; }
.ar-readrug canvas { display: block; width: 100%; height: auto; aspect-ratio: 136 / 238; image-rendering: pixelated; }

/* ── Where they're tied: a long undyed runner, off-centre ───────────── */
.ar-wh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); align-items: start; }
.ar-whhead { grid-column: 1 / 4; position: sticky; top: calc(var(--bar-h, 40px) + var(--ar-nav) + 32px); padding-top: 48px; }
.ar-whhead h2 { font-size: clamp(2rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1; max-width: 9ch; }
.ar-whhead p { margin-top: 16px; font-size: .9375rem; color: var(--ar-ink-dim); max-width: 30ch; }
.ar-runner {
  grid-column: 4 / 13; position: relative; transform: rotate(-.7deg); color: var(--ar-ink);
  --fl: 34px; --fc: #E0D5BC; padding: var(--fl) 0; filter: drop-shadow(10px 16px 16px rgba(46, 38, 30, .38));
  background:
    repeating-linear-gradient(90deg, var(--fc) 0 1.5px, transparent 1.5px 5px) 0 6px / 100% calc(var(--fl) - 6px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, var(--fc) 3px 4.4px, transparent 4.4px 10px) 0 0 / 100% var(--fl) no-repeat,
    repeating-linear-gradient(90deg, var(--fc) 0 1.5px, transparent 1.5px 5px) 2px calc(100% - 6px) / 100% calc(var(--fl) - 6px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 6px, var(--fc) 6px 7.4px, transparent 7.4px 12px) 0 100% / 100% var(--fl) no-repeat,
    linear-gradient(var(--ar-wool), var(--ar-wool)) 0 var(--fl) / 100% calc(100% - 2 * var(--fl)) no-repeat;
}
.ar-lands { position: relative; padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 64px); border-inline: 10px solid transparent; border-image: repeating-linear-gradient(180deg, #2E3F7A 0 6px, var(--ar-wool) 6px 9px, var(--ar-madder-rug) 9px 15px, var(--ar-wool) 15px 18px) 10; }
.ar-lands li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(20px, 3vw, 44px); padding: clamp(26px, 3.4vw, 52px) 88px clamp(26px, 3.4vw, 52px) 0; position: relative; }
.ar-lands li + li { background: repeating-linear-gradient(90deg, var(--ar-walnut-deep) 0 6px, transparent 6px 9px) 0 0 / 100% 2px no-repeat; }
.ar-lands h3 { font-weight: 800; font-size: clamp(2.25rem, 1rem + 7vw, 7.5rem); line-height: .9; letter-spacing: -.02em; }
.ar-lands p { flex: 1 1 22ch; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; }
.ar-kd { position: absolute; right: 0; top: 50%; width: 72px; height: 72px; margin-top: -36px; color: var(--ar-indigo); }

/* ── From the loom to your floor: written on the back of your rug ───── */
@property --ar-fold { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.ar-journey { --ar-ji: clamp(10px, 4.4vw, 72px); overflow: hidden; --ar-fold: 82%; padding: clamp(110px, 12vw, 220px) calc(var(--ar-m) + var(--ar-ji)); color: var(--ar-wool); }
.ar-jr { position: absolute; inset: 44px var(--ar-ji); background: repeating-conic-gradient(#232A63 0 25%, #1A1F4C 0 50%) 0 0 / 14px 14px; box-shadow: 10px 16px 30px -12px var(--ar-shadow); }
.ar-jr::before, .ar-jr::after { content: ""; position: absolute; left: 1.5%; right: 1.5%; height: 30px; pointer-events: none;
  background: radial-gradient(circle, #E4DAC4 2.2px, transparent 2.9px) 0 0 / 9px 7px repeat-x, repeating-linear-gradient(90deg, #E4DAC4 0 1.5px, transparent 1.5px 5px) 0 5px / 100% 25px no-repeat; }
.ar-jr::before { bottom: 100%; transform: scaleY(-1); } .ar-jr::after { top: 100%; }
.ar-jr canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.ar-jface { clip-path: inset(var(--ar-fold) 0 0 0); }
.ar-jlip { position: absolute; left: 0; right: 0; top: var(--ar-fold); height: 28px; margin-top: -14px; background: linear-gradient(to bottom, rgba(10, 12, 34, 0), rgba(10, 12, 34, .55) 42%, rgba(239, 231, 214, .5) 50%, rgba(239, 231, 214, .12) 60%, rgba(10, 12, 34, 0)); display: none; }
.ar-js .ar-jlip { display: block; }
@supports (animation-timeline: view()) {
  @keyframes ar-turnup { from { --ar-fold: 0%; } to { --ar-fold: 100%; } }
  .ar-js .ar-journey { animation: ar-turnup linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  .ar-js .ar-jface { clip-path: inset(0 0 calc(100% - var(--ar-fold)) 0); }
  .ar-js .ar-jlip { background: linear-gradient(to top, rgba(10, 12, 34, 0), rgba(10, 12, 34, .55) 42%, rgba(239, 231, 214, .5) 50%, rgba(239, 231, 214, .12) 60%, rgba(10, 12, 34, 0)); }
}
.ar-jin { position: relative; text-shadow: 0 1px 14px rgba(15, 18, 50, .9), 0 0 3px rgba(15, 18, 50, .6); }
.ar-jin h2 { max-width: 12ch; }
.ar-jnote { margin-top: 24px; max-width: 46ch; font-size: 1.0625rem; }
.ar-passes { margin: clamp(56px, 7vw, 112px) auto 0; max-width: 1080px; padding: 0 22px; }
.ar-passes li { position: relative; padding: 30px 0 34px; background: repeating-linear-gradient(90deg, var(--ar-walnut) 0 7px, #8C6A36 7px 9px) 0 0 / 100% 3px no-repeat; }
.ar-passes li::after { content: ""; position: absolute; top: 0; height: 100%; width: 22px; border: 3px solid var(--ar-walnut); pointer-events: none; }
.ar-passes li:nth-child(odd)::after { right: -22px; border-left: 0; border-radius: 0 999px 999px 0; }
.ar-passes li:nth-child(even)::after { left: -22px; border-right: 0; border-radius: 999px 0 0 999px; }
.ar-passes li.ar-last::after { display: none; }
.ar-passes li:nth-child(even) { text-align: right; }
.ar-passes li:nth-child(even) > * { margin-left: auto; }
.ar-passes h3 { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 3rem); max-width: 16ch; }
.ar-passes p { margin-top: 8px; max-width: 40ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 500; }
.ar-passes li.ar-last { background: repeating-linear-gradient(90deg, var(--ar-wool) 0 7px, #C9BFA8 7px 9px) 0 0 / 100% 3px no-repeat; }

/* ── A week on your floor: the room, to scale ───────────────────────── */
.ar-wk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); align-items: stretch; }
.ar-place { grid-column: 1 / 8; }
.ar-room { position: relative; aspect-ratio: 3 / 2; overflow: hidden; box-shadow: 10px 16px 30px -10px var(--ar-shadow); background: #7A5530; }
.ar-room img { width: 100%; height: 100%; object-fit: cover; }
.ar-room canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; cursor: grab; touch-action: none; }
.ar-room canvas.ar-drawn { opacity: 1; }
.ar-room canvas:active { cursor: grabbing; }
.ar-room canvas:focus-visible { outline-offset: -5px !important; }
.ar-wctl { display: none; }
.ar-js .ar-wctl { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 22px; margin-top: 20px; }
.ar-wsel { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ar-walnut-ink); }
.ar-wsel select { min-height: 42px; padding: 0 34px 0 12px; font: 500 .9375rem var(--ar-t); color: var(--ar-ink); background: var(--ar-wool) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%231C1D38' d='M1 3h10v2H9v2H7v2H5V7H3V5H1z'/%3E%3C/svg%3E") right 12px center / 10px no-repeat; border: 0; box-shadow: inset 0 0 0 1px rgba(28, 29, 56, .25), 4px 6px 14px -8px var(--ar-shadow); appearance: none; border-radius: 0; }
.ar-wsel select option { color: #1A1F4C; background: #EFE7D6; }
.ar-wsize { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ar-wsize legend { width: 100%; padding: 0; margin-bottom: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ar-walnut-ink); }
.ar-wsize label, .ar-chips label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(28, 29, 56, .3); }
.ar-wsize input, .ar-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ar-wsize label:has(:checked), .ar-chips label:has(:checked) { background: var(--ar-madder-rug); color: var(--ar-wool); box-shadow: inset 0 0 0 1px rgba(239, 231, 214, .4); }
.ar-wsize label:has(:focus-visible), .ar-chips label:has(:focus-visible) { outline: 2px solid var(--ar-madder); outline-offset: 2px; }
.ar-wsize:disabled { opacity: .5; }
.ar-wsize:disabled label { cursor: default; }
.ar-wnote { margin-top: 14px; }
.ar-band {
  grid-column: 8 / 13; position: relative; padding: clamp(28px, 3.6vw, 56px) clamp(22px, 3vw, 44px); background: var(--ar-wool); color: var(--ar-ink);
  box-shadow: inset 0 0 0 1px rgba(28, 29, 56, .08), 10px 16px 30px -10px var(--ar-shadow);
  background-image: repeating-linear-gradient(0deg, rgba(101, 74, 42, .06) 0 1px, transparent 1px 4px);
}
.ar-band::before, .ar-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(180deg, var(--ar-walnut) 0 3px, transparent 3px 6px); opacity: .8; }
.ar-band::before { left: 0; } .ar-band::after { right: 0; }
.ar-band h2 { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.75rem); }
.ar-band .ar-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }

/* ── Washed and mended by hand: the walnut rug ──────────────────────── */
.ar-mend { padding-inline: 6vw; }
.ar-mend .ar-face { --tilt: .6deg; --bg: var(--ar-walnut); --fc: #E8DCC2; --kl: #CDB58A; --ks: #1A1F4C; --bk: #8A6436; --bk2: #5C4222; --gl: rgba(28, 29, 56, .45); color: var(--ar-ink); }
.ar-mn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); }
.ar-mfig { grid-column: 1 / 5; margin: 0; }
.ar-mfig picture { display: block; position: sticky; top: calc(var(--bar-h, 40px) + var(--ar-nav) + 28px); box-shadow: 10px 16px 30px -12px rgba(40, 24, 8, .55); }
.ar-mfig img { width: 100%; height: auto; }
.ar-mcopy { grid-column: 6 / 13; }
.ar-jobs { margin-top: clamp(40px, 5vw, 72px); }
.ar-jobs div { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px 28px; align-items: baseline; padding: 22px 0 24px; background: repeating-linear-gradient(90deg, rgba(26, 31, 76, .55) 0 5px, transparent 5px 8px) 0 0 / 100% 1.5px no-repeat; }
.ar-jobs dt { font-family: var(--ar-d); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.5rem); line-height: .98; letter-spacing: -.01em; }
.ar-jobs dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.ar-care { margin-top: clamp(48px, 6vw, 88px); padding: 28px clamp(20px, 3vw, 36px); background: rgba(26, 31, 76, .1); box-shadow: inset 0 0 0 1.5px rgba(26, 31, 76, .3); }
.ar-care h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.ar-care ul { margin-top: 16px; display: grid; gap: 10px; columns: 2; }
.ar-care li { position: relative; padding-left: 22px; }
.ar-care li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--ar-ink); box-shadow: 2px 2px 0 var(--ar-madder-rug); }
.ar-close { margin-top: 40px; font-family: var(--ar-d); font-weight: 800; font-size: clamp(2rem, 1rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -.015em; }

/* ── Come in: the form, and the page's last fringe ──────────────────── */
.ar-visit { padding-bottom: 0; }
.ar-vs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ar-gut); align-items: start; }
.ar-vhead { grid-column: 1 / 6; }
.ar-vhead h2 { max-width: 10ch; }
.ar-vhead p:last-child { margin-top: 24px; max-width: 44ch; color: var(--ar-ink-dim); }
.ar-form { grid-column: 7 / 13; margin-top: 8px; display: grid; gap: 24px; position: relative; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px); color: var(--ar-wool); background: var(--ar-madder-rug) repeating-linear-gradient(0deg, rgba(60, 14, 8, .08) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 10px var(--ar-madder-rug), inset 0 0 0 12px rgba(239, 231, 214, .55), 10px 16px 30px -10px var(--ar-shadow); }
.ar-form::before, .ar-form::after { content: ""; position: absolute; left: 2%; right: 2%; height: 24px; pointer-events: none;
  background: radial-gradient(circle, #E4DAC4 2.2px, transparent 2.9px) 0 0 / 9px 7px repeat-x, repeating-linear-gradient(90deg, #E4DAC4 0 1.5px, transparent 1.5px 5px) 0 5px / 100% 19px no-repeat; }
.ar-form::before { bottom: 100%; transform: scaleY(-1); } .ar-form::after { top: 100%; }
.ar-form .ar-chips label:has(:checked) { background: var(--ar-wool); color: var(--ar-ink); }
.ar-form .ar-chips label { box-shadow: inset 0 0 0 1px rgba(239, 231, 214, .45); }
.spec-abrash #spec-main .ar-form :focus-visible, .ar-form .ar-chips label:has(:focus-visible) { outline-color: var(--ar-wool); }
.ar-form .ar-btn { background: var(--ar-wool); color: var(--ar-ink); }
.ar-form .ar-btn:hover { background: #E4D9C2; }
.ar-f { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ar-f[hidden] { display: none; }
.ar-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ar-f > span, .ar-f legend { font-size: .9375rem; font-weight: 600; padding: 0; }
.ar-f input[type="text"], .ar-f select, .ar-f textarea {
  width: 100%; min-height: 44px; padding: 8px 2px; font: inherit; color: var(--ar-wool); background: transparent; border: 0; border-radius: 0; appearance: none;
  background: linear-gradient(rgba(239, 231, 214, .55), rgba(239, 231, 214, .55)) 0 100% / 100% 1.5px no-repeat, repeating-linear-gradient(90deg, rgba(185, 143, 74, .8) 0 3px, transparent 3px 6px) 0 calc(100% - 4px) / 100% 1.5px no-repeat;
}
.ar-f select { padding-right: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23EFE7D6' d='M1 3h10v2H9v2H7v2H5V7H3V5H1z'/%3E%3C/svg%3E") right 4px center / 10px no-repeat, linear-gradient(rgba(239, 231, 214, .55), rgba(239, 231, 214, .55)) 0 100% / 100% 1.5px no-repeat, repeating-linear-gradient(90deg, rgba(185, 143, 74, .8) 0 3px, transparent 3px 6px) 0 calc(100% - 4px) / 100% 1.5px no-repeat; }
.ar-f textarea { resize: vertical; }
.ar-f select option { color: #1A1F4C; background: #EFE7D6; }
.ar-f input::placeholder { color: rgba(239, 231, 214, .6); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-chips legend { width: 100%; margin-bottom: 6px; }
.ar-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ar-send .ar-btn { margin: 0; }
.ar-status { font-weight: 600; font-size: .9375rem; }
.ar-foot { position: relative; margin: clamp(80px, 10vw, 160px) calc(-1 * var(--ar-m)) 0; padding: 0 var(--ar-m) clamp(40px, 5vw, 64px); }
.ar-foot::before { content: ""; display: block; height: 104px; margin: 0 calc(-1 * var(--ar-m)) 36px;
  background:
    linear-gradient(var(--ar-madder-rug), var(--ar-madder-rug)) 0 8px / 100% 4px no-repeat,
    linear-gradient(#E4DAC4, #E4DAC4) 0 0 / 100% 20px no-repeat,
    radial-gradient(circle, #E4DAC4 2.4px, transparent 3px) 0 20px / 9px 8px repeat-x,
    repeating-linear-gradient(90deg, #E4DAC4 0 1.6px, transparent 1.6px 5px) 0 24px / 100% 64px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 2.5px, #D6CAAF 2.5px 4px, transparent 4px 9px) 0 24px / 100% 80px no-repeat;
}
.ar-fin { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.ar-fin p { font-size: .9375rem; color: var(--ar-ink-dim); }
.ar-flinks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; margin-left: auto; }
.ar-flinks a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--ar-walnut-ink); }

/* ── widths ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ar-whhead { grid-column: 1 / -1; position: static; padding: 0 0 40px; }
  .ar-whhead h2 { max-width: none; }
  .ar-runner { grid-column: 2 / 13; }
  .ar-piled .ar-stwrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ar-piled .ar-rug { --pcm: .152cqw; }
}
@media (max-width: 1000px) {
  .ar-ab h2, .ar-ab .ar-lead, .ar-ab .ar-ab2, .ar-big, .ar-show { grid-column: 1 / -1; }
  .ar-ab .ar-ab2 { margin-top: 20px; }
  .ar-sthead h2, .ar-sthead .ar-lead { grid-column: 1 / -1; }
  .ar-sthead .ar-lead { margin-top: 20px; }
  .ar-pile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-bkcopy h2, .ar-bkp { grid-column: 1 / -1; }
  .ar-bkp { margin-top: 28px; }
  .ar-js .ar-words { grid-column: 1 / 8; }
  .ar-js .ar-readrug { grid-column: 8 / 13; }
  .ar-place, .ar-band { grid-column: 1 / -1; }
  .ar-band { margin-top: 28px; }
  .ar-room { aspect-ratio: 4 / 3; }
  .ar-mfig { grid-column: 1 / 5; }
  .ar-mcopy { grid-column: 5 / 13; }
  .ar-vhead, .ar-form { grid-column: 1 / -1; }
  .ar-form { margin-top: 40px; }
  .ar-runner { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ar-piled .ar-stwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .ar-piled .ar-pile { grid-row: 1 / span 3; }
  .ar-piled .ar-rug { --pcm: .3cqw; margin: calc(30 * var(--pcm)) auto; }
  .ar-piled .ar-dt { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .ar-piled .ar-stctl { grid-row: 2; }
  .ar-pile { grid-template-columns: minmax(0, 1fr); }
  .ar-face { --fl: 26px; }
  .ar-abrash .ar-face { --tilt: -.3deg; }
  .ar-back .ar-face { --tilt: .3deg; }
  .ar-mend .ar-face { --tilt: .35deg; }
  .ar-back, .ar-mend { padding-inline: 4px; }
  .ar-abrash .ar-face::before, .ar-mend .ar-face::before { left: 8px; right: 8px; }
  .ar-js .ar-words, .ar-js .ar-readrug { grid-column: 1 / -1; }
  .ar-readp { grid-column: 1 / -1; grid-row: 2; }
  .ar-js .ar-readrug { grid-row: 3; width: min(100%, 300px); margin: 24px auto 8px; }
  .ar-js .ar-words { grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(46px, auto); }
  .ar-js .ar-words [data-w] dt { grid-area: auto; place-self: center start; }
  .ar-js .ar-words [data-w="abrash"] dt, .ar-js .ar-words [data-w="pile"] dt { grid-column: span 2; --s: 2.75rem; }
  .ar-js .ar-words [data-w] dt button { font-size: min(var(--s), 2.25rem); }
  .ar-js .ar-words [data-w="abrash"] dt button, .ar-js .ar-words [data-w="pile"] dt button { font-size: 2.75rem; }
  .ar-js .ar-words [data-w] dt { grid-column: span 2; }
  .ar-js .ar-words dd { grid-row: auto; }
  .ar-runner { transform: rotate(-.3deg); margin-inline: -8px; }
  .ar-lands { border-inline-width: 7px; padding-inline: 16px; }
  .ar-lands li { padding-right: 0; display: block; }
  .ar-lands h3 { font-size: clamp(2.25rem, 1.4rem + 4vw, 2.75rem); }
  .ar-lands p { margin-top: 10px; }
  .ar-kd { position: relative; float: right; top: auto; margin: 0 0 4px 12px; width: 56px; height: 56px; }
  .ar-lands li::after { content: ""; display: block; clear: both; }
  .ar-passes { padding: 0 12px; }
  .ar-passes li::after { width: 12px; }
  .ar-passes li:nth-child(odd)::after { right: -12px; }
  .ar-passes li:nth-child(even)::after { left: -12px; }
  .ar-mfig, .ar-mcopy { grid-column: 1 / -1; }
  .ar-mfig picture { position: static; aspect-ratio: 4 / 5; overflow: hidden; }
  .ar-mfig img { height: 100%; object-fit: cover; }
  .ar-mcopy { margin-top: 40px; }
  .ar-jobs div { grid-template-columns: 1fr; }
  .ar-care ul { columns: 1; display: grid; }
  .ar-f2 { grid-template-columns: 1fr; }
  .ar-flinks { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-js .ar-loom { height: auto; }
  .ar-stage { position: relative; top: 0; }
  .ar-line.ar-tie { animation: none; }
  .ar-swing, .ar-another.ar-pull .ar-swing { animation: none; transition: none; }
  .ar-tab, .ar-cgl, .ar-swb canvas, .ar-swn, .ar-bands, .ar-words dt button { transition: none; }
  .ar-face, .ar-js .ar-journey { animation: none !important; }
  .ar-face { --ar-c: min(22vmin, 180px); }
  .ar-js .ar-journey { --ar-fold: 82%; }
  .ar-js .ar-jface { clip-path: inset(var(--ar-fold) 0 0 0); }
  .ar-js .ar-jlip { background: linear-gradient(to bottom, rgba(10, 12, 34, 0), rgba(10, 12, 34, .55) 42%, rgba(239, 231, 214, .5) 50%, rgba(239, 231, 214, .12) 60%, rgba(10, 12, 34, 0)); }
}