/* ARTS BESPOKE — the house stylesheet
   Ground:   alabaster, the daylit gallery.
   Pigments: lapis lazuli and gold leaf — the two most expensive things a
             miniaturist ever ground. Vermilion enters once, never twice.
   Light:    a skylight wash, moving slowly, the way daylight crosses a room.
   Type:     Roman inscriptional capitals — lettering cut for buildings. */

:root{
  --paper:#FCFBF8;        /* the room */
  --paper-2:#F5F2EB;      /* a panel, or a page laid on the table */
  --paper-3:#EFEBE1;      /* the recess */
  --ink:#16204A;          /* deep indigo — all primary text */
  --ink-soft:#4A5578;      /* secondary text */
  --ink-faint:#8A92AC;    /* captions, references */

  /* the pigment box */
  --lapis:#2A4BA0;        /* ultramarine, ground from stone */
  --lapis-lit:#4C71D0;
  --leaf:#B8901F;         /* gold leaf */
  --leaf-lit:#D8B44A;
  --sindoor:#C1352B;      /* vermilion — once per page */
  --verdigris:#3E7F72;    /* copper green */

  --measure:64ch;
  --gut:clamp(1.5rem,4vw,4.5rem);
  --rule:1px solid rgba(22,32,74,.13);
  --rule-strong:1px solid rgba(22,32,74,.26);
  --lift:0 1px 2px rgba(22,32,74,.04),0 8px 28px -12px rgba(22,32,74,.14);

  /* ── motion ──────────────────────────────────────────
     Personality: PREMIUM (LottieFiles motion-design skill) — elegant, minimal,
     luxury. 350–600ms, decelerating, ZERO overshoot. A bounce here would read
     playful, which is the opposite of what this house sells.
     One signature curve carries ~80% of movement; entrances decelerate, exits
     accelerate, and an entrance runs longer than its exit because people care
     about what arrives. */
  --ease:        cubic-bezier(.4,0,.2,1);      /* signature */
  --ease-enter:  cubic-bezier(.05,.7,.1,1);    /* MD3 emphasized decelerate */
  --ease-exit:   cubic-bezier(.3,0,1,1);       /* accelerate away */
  --ease-ambient:cubic-bezier(.4,0,.2,1);      /* background life */
  --t-quick: 90ms;    /* hover, micro-feedback — must feel instant */
  --t-base:  320ms;   /* state change, card */
  --t-slow:  520ms;   /* entrance, reveal */
  --t-exit:  220ms;   /* shorter than its entrance, deliberately */

}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:clamp(1.04rem,.42vw + .96rem,1.2rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--leaf-lit);color:var(--ink)}
/* Hidden by clipping, not by being pushed off to the left. left:-9999px is
   safe in English and ruinous in Arabic: with the document flowing right to
   left it extends the scrollable area by ten thousand pixels and moves the
   scroll origin, so the page opens on empty paper. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;
  inset-inline-start:var(--gut);top:.6rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem}

/* type roles */
.display{font-family:"Bodoni Moda","EB Garamond",Georgia,serif;font-weight:400;
  font-optical-sizing:auto;line-height:1.06;letter-spacing:-.006em}
.util--leaf{color:var(--leaf)}
.util--lapis{color:var(--lapis)}
.ref{font-family:Jost,monospace;font-size:.64rem;letter-spacing:.18em;color:var(--ink-faint)}

/* layout */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.band{padding:clamp(4.5rem,10vw,9rem) 0;position:relative}
.band + .band{border-top:var(--rule)}
.band--sunk{background:var(--paper-2)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink .util,.band--ink .ref{color:rgba(252,251,248,.6)}
.band--ink .head h2{color:var(--paper)}

/* ── the house mark ─────────────────────────────────────── */
.mark{width:2rem;height:2rem;flex:0 0 auto}
.mark--lg{width:clamp(3.6rem,7vw,5.4rem);height:clamp(3.6rem,7vw,5.4rem)}
.mark circle:nth-of-type(1){transform-origin:center;animation:bindu 7s ease-in-out infinite}
@keyframes bindu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.88)}}

/* masthead */
.masthead{position:sticky;top:0;z-index:60;background:rgba(252,251,248,.88);backdrop-filter:blur(14px);
  border-bottom:var(--rule)}
.masthead__in{max-width:1280px;margin:0 auto;padding:.85rem var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:2rem}
.wordmark{display:flex;align-items:center;gap:.85rem;font-family:"Bodoni Moda",Georgia,serif;font-size:.98rem;
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--ink)}
.nav{display:flex;gap:clamp(1rem,2.1vw,2rem);align-items:center}
.nav a{font-family:Jost,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:.35rem 0;border-bottom:1px solid transparent;
  transition:color var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease)}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--leaf)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--leaf)}
.nav__call{color:var(--lapis) !important}
.nav__toggle{display:none;background:none;border:0;color:var(--ink);font-family:Jost,sans-serif;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:.4rem}

/* ── THE SIGNATURE: a daylit room, and the light crossing it ── */
@property --lx{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --ly{syntax:'<percentage>';inherits:false;initial-value:14%}
.wall{position:relative;min-height:clamp(600px,92vh,1000px);display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(120% 80% at 82% 4%,rgba(216,180,74,.20) 0%,rgba(252,251,248,0) 58%),
    radial-gradient(100% 70% at 6% 96%,rgba(42,75,160,.13) 0%,rgba(252,251,248,0) 60%),
    linear-gradient(178deg,#FFFFFF 0%,#FCFBF8 46%,#F4F1E9 100%)}
/* RAKING LIGHT — the signature, and the house's actual instrument.
   A conservator judges a painting by dropping the light to a low oblique angle:
   flat light flatters, raking light tells the truth, and the canvas weave,
   the craquelure and every old repair rise out of a surface that looked smooth.
   This site says so on four pages; here the hero does it instead of saying it.
   The weave below is woven warp and weft, invisible until the rake crosses it. */
.wall::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* Linen, not graph paper. A square grid at one pitch reads as a technical
     drawing; real canvas has a heavier warp than weft and the two do not agree,
     so the pitches are set 4px against 5px and never line up into squares. The
     third pass is slub: the thickened slubs a linen thread carries along it. */
  background-image:
    repeating-linear-gradient(90deg,rgba(22,32,74,.050) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(22,32,74,.034) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(22,32,74,.022) 0 1px,transparent 1px 23px);
  /* the band of light itself: narrow, oblique, and the only thing that reveals */
  -webkit-mask-image:linear-gradient(102deg,transparent calc(var(--rake,32%) - 19%),
    #000 var(--rake,32%),transparent calc(var(--rake,32%) + 19%));
  mask-image:linear-gradient(102deg,transparent calc(var(--rake,32%) - 19%),
    #000 var(--rake,32%),transparent calc(var(--rake,32%) + 19%));
  transition:--rake .5s cubic-bezier(.4,0,.2,1)}
@property --rake{syntax:"<percentage>";inherits:true;initial-value:32%}
/* Standing still, the light makes its own pass, the way the sun does through a
   skylight: slow enough to be noticed rather than watched. A pointer takes it
   over by stopping this animation, which is how the skylight already works. */
.wall{animation:rake 26s ease-in-out infinite alternate}
@keyframes rake{from{--rake:4%}to{--rake:98%}}
@media (prefers-reduced-motion:reduce){
  .wall{animation:none}
  .wall::before{transition:none;-webkit-mask-image:none;mask-image:none;opacity:.42}}
/* the skylight, crossing the room */
.wall__lamp{position:absolute;inset:-25% -12%;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(42% 55% at var(--lx) var(--ly),
    rgba(255,255,255,0) 0%,rgba(22,32,74,.035) 55%,rgba(22,32,74,.075) 100%);
  animation:daylight 30s ease-in-out infinite alternate}
@keyframes daylight{0%{--lx:18%;--ly:10%}50%{--lx:52%;--ly:22%}100%{--lx:84%;--ly:12%}}
.wall__in{position:relative;z-index:2;width:100%;padding-block:clamp(4rem,9vw,7rem)}
.wall__eyebrow{margin:0 0 clamp(1.4rem,3vw,2.2rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.wall__name{margin:0;font-size:clamp(2.9rem,10.2vw,8.4rem);letter-spacing:.006em;color:var(--ink)}
.wall__name em{display:block;font-style:normal}
/* the gilded word — leaf laid on, not printed */
.wall__name .lit{
  background:linear-gradient(96deg,#8A6B14 0%,#D8B44A 26%,#F1E0AB 44%,#C39A24 62%,#8A6B14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
.wall__rule{width:clamp(64px,9vw,128px);height:1px;background:var(--leaf);margin:clamp(1.7rem,3.6vw,2.6rem) 0}
.wall__claim{max-width:48ch;margin:0;color:var(--ink-soft);font-size:clamp(1.06rem,.5vw + 1rem,1.32rem);line-height:1.62}
.wall__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,2.8rem)}
.wall__foot{position:absolute;left:0;right:0;bottom:clamp(1.4rem,3.5vw,2.4rem);z-index:2;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center;
  /* The Ask-the-house tab is fixed to the right edge, so the footer's last line
     — which carries the telephone number — has to stop short of it. Adding the
     cities made this line long enough to run underneath. */
  padding-right:clamp(9rem,14vw,13rem)}

/* section heads */
.head{display:flex;gap:1.4rem;align-items:baseline;margin:0 0 clamp(2rem,4vw,3.2rem);flex-wrap:wrap}
.head h2{margin:0;font-size:clamp(1.9rem,3.6vw,3.15rem)}
.head .ref{margin-left:auto}

/* the disciplines */
.cols{display:grid;border-top:var(--rule);border-left:var(--rule)}
.cols--3{grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.cols--2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.cell{background:var(--paper);padding:clamp(1.9rem,3.4vw,2.9rem);transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
  position:relative;overflow:hidden;border-right:var(--rule);border-bottom:var(--rule)}
.cell::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;transform:scaleX(0);transform-origin:left;
  background:var(--accent,var(--leaf));transition:transform var(--t-slow) var(--ease-enter)}
.cell:hover{background:#fff;box-shadow:var(--lift)}
.cell:hover::after{transform:scaleX(1)}
.cell h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:1.42rem;margin:.9rem 0 .8rem;line-height:1.25}
.cell :where(p){margin:0;color:var(--ink-soft);font-size:.99rem;line-height:1.66}
.cell__link{display:inline-block;margin-top:1.5rem;font-family:Jost,sans-serif;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--leaf);padding-bottom:.28rem;transition:color var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease)}
.cell__link:hover{color:var(--lapis);border-bottom-color:var(--lapis)}

/* prose */
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.4rem}
.prose p:last-child{margin-bottom:0}
.prose .drop::first-letter{font-family:"Bodoni Moda",Georgia,serif;float:left;font-size:3.4em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--leaf)}
.prose--wide{max-width:76ch}
.prose h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:400}

/* ── figures (data) ─────────────────────────────────────── */
/* Hairlines are drawn on the cells, not by exposing the container behind them —
   an unfilled grid track must never show as a grey block. */
.figures{display:grid;border-top:var(--rule);border-left:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.figure{background:var(--paper);padding:clamp(1.7rem,3vw,2.5rem);
  border-right:var(--rule);border-bottom:var(--rule)}
.figure__n{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(2rem,4.3vw,3.2rem);line-height:1;margin:.65rem 0 .55rem;
  color:var(--lapis)}
.figure__n small{font-size:.4em;color:var(--ink-soft);letter-spacing:.02em}
.figure :where(p){margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.6}
.figure cite{display:block;margin-top:.9rem;font-family:Jost,sans-serif;font-style:normal;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* the ledger */
.ledger{border-top:var(--rule)}
.ledger__row{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem 2rem;
  padding:clamp(1.35rem,2.6vw,1.9rem) 0;border-bottom:var(--rule);transition:background var(--t-quick) var(--ease)}
.ledger__row:hover{background:var(--paper-2)}
.ledger__name{font-family:"Bodoni Moda",Georgia,serif;font-size:1.22rem;line-height:1.3;margin:0}
.ledger__name .ref{display:inline-block;margin-left:.5rem}
.ledger__note{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.62}
.ledger__meta{margin:0;color:var(--ink-faint);font-family:Jost,sans-serif;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;align-self:start}
.ledger__meta b{color:var(--lapis);font-weight:400;display:block;font-size:1.05rem;letter-spacing:.02em;
  font-family:"Bodoni Moda",Georgia,serif;text-transform:none;margin-bottom:.2rem}
@media(min-width:760px){
  .ledger__row{grid-template-columns:minmax(210px,.9fr) minmax(0,1.9fr) minmax(140px,auto)}
}

/* the process */
.steps{counter-reset:s}
.step{display:grid;gap:.5rem 2.2rem;padding:clamp(1.6rem,3vw,2.3rem) 0;border-bottom:var(--rule)}
.step:first-child{border-top:var(--rule)}
.step__n{counter-increment:s;font-family:Jost,sans-serif;font-size:.68rem;letter-spacing:.2em;
  color:var(--leaf);padding-top:.45rem}
.step__n::before{content:"Step " counter(s,decimal-leading-zero)}
.step h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:1.32rem;margin:0 0 .55rem}
.step :where(p){margin:0;color:var(--ink-soft);font-size:.99rem;line-height:1.66;max-width:60ch}
@media(min-width:760px){.step{grid-template-columns:auto minmax(0,1fr)}}

/* the enquiry */
.enquiry{border:var(--rule);padding:clamp(2.2rem,5vw,4rem);background:
  linear-gradient(155deg,rgba(42,75,160,.07),rgba(216,180,74,.07) 78%),var(--paper)}
.enquiry h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;margin:.7rem 0 1.1rem;font-size:clamp(1.85rem,3.4vw,2.75rem)}
.enquiry :where(p){color:var(--ink-soft);max-width:52ch;margin:0 0 2rem}
.mailto{display:inline-flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--paper);
  background:var(--ink);padding:.98rem 1.8rem;font-family:Jost,sans-serif;font-size:.74rem;
  letter-spacing:.19em;text-transform:uppercase;border:1px solid var(--ink);
  transition:background var(--t-quick) var(--ease),color .3s,transform .3s,box-shadow .3s}
.mailto:hover,.mailto:focus-visible{background:transparent;color:var(--ink);transform:translateY(-2px);box-shadow:var(--lift)}
.mailto--quiet{background:transparent;color:var(--ink);border-color:rgba(22,32,74,.3)}
.mailto--quiet:hover{background:var(--ink);color:var(--paper)}
.mailto--leaf{background:var(--leaf);border-color:var(--leaf);color:#fff}
.mailto--leaf:hover{background:transparent;color:var(--leaf)}
.enquiry__alt{margin:1.6rem 0 0;font-size:.93rem;color:var(--ink-faint)}
.enquiry__alt a{color:var(--ink-soft)}

/* colophon */
.colophon{border-top:var(--rule);padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);background:var(--paper-2)}
.colophon__grid{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.colophon h4{margin:0 0 1.05rem}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{margin:0 0 .6rem}
.colophon a{color:var(--ink-soft);text-decoration:none;font-size:.95rem;transition:color var(--t-quick) var(--ease)}
.colophon a:hover{color:var(--ink)}
.colophon address{font-style:normal;color:var(--ink-soft);font-size:.95rem;line-height:1.75}
.colophon__base{margin-top:clamp(2.6rem,5vw,3.8rem);padding-top:1.5rem;border-top:var(--rule);
  display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:center}

/* page opener */
.opener{padding:clamp(4rem,9vw,7.5rem) 0 clamp(2.6rem,5vw,4rem);border-bottom:var(--rule);
  position:relative;overflow:hidden;
  background:radial-gradient(70% 90% at 88% 4%,rgba(216,180,74,.16),transparent 68%),var(--paper)}
.opener__in{position:relative;z-index:2}
.opener h1{margin:.9rem 0 0;font-size:clamp(2.5rem,6.4vw,5rem)}
.opener :where(p){margin:1.7rem 0 0;max-width:56ch;color:var(--ink-soft);font-size:clamp(1.02rem,.42vw + .95rem,1.2rem)}

/* honest states */
.notice{border-left:2px solid var(--sindoor);padding:.15rem 0 .15rem 1.4rem;margin:2.4rem 0 0;
  color:var(--ink-soft);font-size:.96rem;max-width:58ch}

/* ── motion: a work is revealed as the light reaches it ─── */
[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease-enter),transform var(--t-slow) var(--ease-enter)}
[data-reveal].is-lit{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:70ms}
[data-reveal-delay="2"]{transition-delay:140ms}
[data-reveal-delay="3"]{transition-delay:210ms}
[data-reveal-delay="4"]{transition-delay:280ms}

/* responsive */
@media(max-width:960px){
  .nav{position:fixed;inset:58px 0 auto;background:var(--paper);border-bottom:var(--rule);
    flex-direction:column;align-items:flex-start;gap:0;padding:1rem var(--gut) 1.7rem;
    transform:translateY(-140%);transition:transform var(--t-base) var(--ease-enter);box-shadow:var(--lift)}
  .nav[data-open="true"]{transform:translateY(0)}
  .nav a{padding:.85rem 0;font-size:.85rem;width:100%}
  .nav__toggle{display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}
:where(a,button):focus-visible{outline:2px solid var(--lapis);outline-offset:3px}

/* ── role classes win ────────────────────────────────────
   Layout blocks style their own paragraphs, but a paragraph
   carrying a role class is that role first. Declared last and
   at class-only specificity so neither order nor nesting can
   demote it. (The .figure p vs .figure__n collision crushed
   every headline figure to 15px before this existed.) */
/* Labels are set as a catalogue sets them: small capitals in the text face.
   Uppercase sans at a quarter-em of tracking was on 163 labels here, and it is
   the loudest generic tell in work of this kind — it belongs to software, not
   to a house that keeps a written register. Small caps say the same thing
   without the costume, and they come from the same family as the prose they
   label, so a caption reads as part of the document rather than a sticker on
   it. Lowercased first, because small caps only render on lowercase letters. */
.util{font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.085em;
  font-size:.88rem;font-weight:500;line-height:1.5;color:var(--ink-faint)}
/* An acronym is not a word: house marks and references keep their capitals. */
.ref{text-transform:none}
.util--leaf{color:var(--leaf)}
.util--lapis{color:var(--lapis)}
.ref{font-family:Jost,monospace;font-size:.64rem;letter-spacing:.18em;color:var(--ink-faint)}
.figure__n{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(2rem,4.3vw,3.2rem);line-height:1;
  margin:.65rem 0 .55rem;color:var(--lapis)}
.figure__n small{font-size:.4em;color:var(--ink-soft);letter-spacing:.02em}
.notice{font-size:.96rem;color:var(--ink-soft)}

/* ── the ground ──────────────────────────────────────────
   The house's own visual language, drawn in canvas by js/ground.js.
   Never an artwork and never captioned as one. */
.ground{display:block;width:100%;height:100%;border:0}
.ground-plate{position:relative;overflow:hidden;background:var(--paper-2);border:var(--rule)}
.ground-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(22,32,74,.07)}

/* ── the viewing room ────────────────────────────────────
   A real room in perspective: back wall, side walls, floor, and a work hung on
   the far wall at true proportion. The visitor looks around by moving the
   pointer. Built in CSS 3D so it costs nothing to load and degrades to a flat
   elevation where 3D transforms are unavailable. */
.room{position:relative;height:clamp(380px,58vh,620px);overflow:hidden;
  background:linear-gradient(180deg,#F7F4ED 0%,#EDE8DD 100%);
  perspective:1100px;perspective-origin:50% 46%;border:var(--rule)}
.room__space{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform var(--t-base) var(--ease)}
.room__face{position:absolute;transform-style:preserve-3d}

.room__back{left:50%;top:50%;width:760px;height:430px;margin:-215px 0 0 -380px;
  transform:translateZ(-460px);
  background:linear-gradient(175deg,#FDFBF6 0%,#F2EDE2 62%,#E9E2D4 100%)}
.room__left{left:50%;top:50%;width:460px;height:430px;margin:-215px 0 0 -380px;
  transform-origin:left center;transform:rotateY(90deg) translateZ(0);
  background:linear-gradient(90deg,#E4DDCE 0%,#F4F0E6 100%)}
.room__right{left:50%;top:50%;width:460px;height:430px;margin:-215px 0 0 380px;
  transform-origin:right center;transform:rotateY(-90deg) translateZ(0);
  background:linear-gradient(270deg,#E4DDCE 0%,#F4F0E6 100%)}
.room__floor{left:50%;top:50%;width:760px;height:460px;margin:215px 0 0 -380px;
  transform-origin:top center;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#DED6C6 0%,#CFC5B2 100%)}

/* the work on the far wall */
.room__work{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%) translateZ(-455px);
  box-shadow:0 26px 44px -18px rgba(22,32,74,.5);border:10px solid #241C12;background:#F3EFE6;padding:9px}
.room__work canvas{display:block}

/* the pool of light the work sits in */
.room__light{position:absolute;left:50%;top:50%;width:520px;height:400px;
  margin:-200px 0 0 -260px;transform:translateZ(-452px);pointer-events:none;
  background:radial-gradient(52% 48% at 50% 34%,rgba(255,252,240,.85) 0%,rgba(255,252,240,0) 72%)}

.room__scale{position:absolute;left:1rem;bottom:1rem;z-index:5}
.room__hint{position:absolute;right:1rem;bottom:1rem;z-index:5}

@media (prefers-reduced-motion:reduce){
  .room__space{transition:none}
}

/* ── works ───────────────────────────────────────────────
   Every plate sits in an identical container regardless of the work's own
   proportions. Letterboxed, never cropped to fill: cropping a painting to suit
   a grid is the one thing a gallery may not do. Fixed ratio is also what stops
   a wall of works reading as a shop. */
.works{display:grid;gap:clamp(2.4rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.work{display:flex;flex-direction:column}
.work__plate{position:relative;aspect-ratio:4/5;background:var(--paper-2);
  border:var(--rule);display:flex;align-items:center;justify-content:center;overflow:hidden}
.work__plate img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 18px 40px -20px rgba(22,32,74,.55);transition:transform var(--t-slow) var(--ease)}
.work:hover .work__plate img{transform:scale(1.022)}
.work__plate--awaiting{color:var(--ink-faint);font-family:Jost,sans-serif;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:2rem}
/* the light in the plate, as a work is lit on a wall */
.work__plate::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 30%,rgba(255,253,246,.7),rgba(255,253,246,0) 72%)}

.work__caption{padding:1.15rem 0 0}
.work__artist{font-family:"Bodoni Moda",Georgia,serif;font-size:1.16rem;margin:0 0 .3rem;line-height:1.3}
.work__artist span{color:var(--ink-faint);font-size:.8em}
.work__line{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.62}
.work__line em{font-style:italic}
.work__note{margin:.9rem 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.66;max-width:52ch}
.work__foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1.1rem;padding-top:.9rem;border-top:var(--rule);flex-wrap:wrap}
.work__price{font-family:"Bodoni Moda",Georgia,serif;font-size:1.14rem;color:var(--ink)}
.work__price small{display:block;font-family:Jost,sans-serif;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.15rem}
.work__ask{font-family:Jost,sans-serif;font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--leaf);padding-bottom:.25rem;
  transition:color var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease)}
.work__ask:hover{color:var(--lapis);border-bottom-color:var(--lapis)}

.work__plate--awaiting::after{content:attr(data-awaiting);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-family:Jost,sans-serif;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:2rem}

/* ── the wordmark ────────────────────────────────────────
   Arts in ink, Bespoke in leaf, set as one word. The split is the brand: two
   halves of a single name rather than two words with a space between them. */
.wordmark{letter-spacing:0;font-size:1.34rem;text-transform:none}
.wordmark__w{font-family:"Bodoni Moda",Georgia,serif;letter-spacing:-.005em;line-height:1}
.wordmark__w b{font-weight:500;color:var(--ink)}
.wordmark__w i{font-style:normal;font-weight:500;color:var(--leaf)}

/* ══ CRAFT ═══════════════════════════════════════════════
   The details a template never has. Each one is restraint executed
   properly rather than an effect added on top. */

/* 1. THE GILDED WORD.
   Real leaf is not a colour, it is a surface: it catches the light and goes
   dull as you move past it. A flat gold gradient is the giveaway that a site
   has only ever seen gold in a swatch. The gradient is wider than the word and
   its position is driven by the pointer, so the highlight travels across the
   letterforms exactly as it would across a gilded surface. */
.wall__name .lit{
  background:linear-gradient(96deg,
    #7A5E10 0%, #A67F1B 14%, #D8B44A 30%, #F6E9BE 42%, #E2C368 52%,
    #B8901F 66%, #8A6B14 82%, #C9A24B 100%);
  background-size:260% 100%;
  background-position:var(--leafpos,42%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.65));
  transition:background-position 900ms var(--ease);
}

/* 2. THE RULE DRAWS ITSELF.
   A hairline that simply appears is a border. One that is struck across the
   page is a gesture, and it costs nothing. */
.wall__rule{transform-origin:left center;transform:scaleX(0);
  animation:strike 900ms var(--ease-enter) 420ms forwards}
@keyframes strike{to{transform:scaleX(1)}}

/* 3. PAGE-LOAD CHOREOGRAPHY.
   Setup, action, resolution. The eyebrow states where we are, the name lands,
   the rule is struck, the claim follows. Staggered so the eye is led rather
   than presented with everything at once. */
.wall__eyebrow,.wall__name,.wall__claim,.wall__cta,.wall__foot{
  opacity:0;animation:rise var(--t-slow) var(--ease-enter) forwards}
.wall__eyebrow{animation-delay:80ms}
.wall__name   {animation-delay:180ms}
.wall__claim  {animation-delay:560ms}
.wall__cta    {animation-delay:680ms}
.wall__foot   {animation-delay:800ms}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 4. TYPOGRAPHIC DETAIL.
   Old-style figures sit on the baseline with ascenders and descenders, the way
   a date is set in a book rather than in a spreadsheet. Ligatures and kerning
   on. Hanging punctuation so a quoted line stays optically flush. */
body{font-kerning:normal;font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility}
.ledger__note,.work__line,.prose :where(p),.figure :where(p),.cell :where(p){
  font-variant-numeric:oldstyle-nums proportional-nums}
/* tabular figures where numbers must align in a column */
.figure__n,.work__price,.ledger__meta b{font-variant-numeric:lining-nums tabular-nums}
.prose p{hanging-punctuation:first last}
.display{font-feature-settings:"kern" 1,"liga" 1}

/* 5. THE PLATE LIFTS UNDER THE EYE.
   A work on a wall is lit from above; moving toward it, the shadow deepens.
   Two properties only, at the standard duration, no scale bounce. */
.work__plate{transition:box-shadow var(--t-base) var(--ease)}
.work:hover .work__plate{box-shadow:0 22px 48px -26px rgba(22,32,74,.42)}

/* ── PRINT ───────────────────────────────────────────────
   A collector prints a work page and gets a document, not a screenshot of a
   website. Navigation, buttons and decoration come off; the caption, the
   reference and the house address stay. Almost no gallery does this, and the
   people who notice are exactly the people worth having. */
@media print{
  @page{margin:18mm}
  html{font-size:11pt}
  body{background:#fff;color:#000}
  .masthead,.nav,.nav__toggle,.enquiry,.wall__lamp,.room,.wall__cta,
  .skip,.mailto,.work__ask,.cell__link,#roomOut{display:none !important}
  .band{padding:0 0 10mm;border:0}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .works{display:block}
  .work{page-break-inside:avoid;margin-bottom:14mm}
  .work__plate{border:1px solid #000;aspect-ratio:auto}
  .work__plate img{max-width:100%;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#444}
  a[href^="mailto"]::after,a[href^="tel"]::after{content:""}
  .colophon{border-top:1px solid #000;padding-top:6mm}
  .colophon__grid{display:none}
  main::after{content:"Arts Bespoke · The Fine Art Destination · clientadvisory@artsbespoke.com · +91 75062 45557";
    display:block;margin-top:8mm;padding-top:4mm;border-top:1px solid #000;
    font-family:Jost,sans-serif;font-size:8pt;letter-spacing:.12em;text-transform:uppercase}
}

/* ── CROSS-PAGE TRANSITION ───────────────────────────────
   Where the browser supports it, moving between pages cross-fades rather than
   flashing white. The masthead is named so it holds still while the page
   beneath it changes, which is what makes a multi-page site feel like one
   room rather than a stack of documents. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--t-exit) var(--ease-exit) both}
::view-transition-new(root){animation:vt-in var(--t-base) var(--ease-enter) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.masthead{view-transition-name:masthead}

@media (prefers-reduced-motion:reduce){
  .wall__rule{animation:none;transform:scaleX(1)}
  .wall__eyebrow,.wall__name,.wall__claim,.wall__cta,.wall__foot{animation:none;opacity:1}
  .wall__name .lit{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── THE PROCESSION ──────────────────────────────────────
   The names of the masters, moving continuously in two opposed bands. This is
   the single place on the site where motion never rests, and it earns that:
   a procession of names is what a great collection actually is, and the two
   directions keep the eye from settling into a rhythm it can predict.
   Duplicated inline so the loop is seamless; paused on hover so a reader can
   hold a name still. */
.procession{position:relative;overflow:hidden;padding:clamp(2rem,4vw,3.2rem) 0;
  border-top:var(--rule);border-bottom:var(--rule);background:var(--paper-2)}
.procession::before,.procession::after{content:"";position:absolute;top:0;bottom:0;width:14vw;
  z-index:2;pointer-events:none}
.procession::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.procession::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.procession__band{display:flex;width:max-content;will-change:transform}
.procession__band--a{animation:drift-l 68s linear infinite}
.procession__band--b{animation:drift-r 84s linear infinite;margin-top:.6rem}
.procession:hover .procession__band{animation-play-state:paused}
@keyframes drift-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.procession__name{font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1.5rem,3.2vw,2.6rem);color:var(--ink);opacity:.34;
  padding:0 clamp(1.1rem,2.4vw,2.2rem);white-space:nowrap;line-height:1.35;
  transition:opacity var(--t-quick) var(--ease),color var(--t-quick) var(--ease)}
.procession__name:hover{opacity:1;color:var(--lapis)}
.procession__name i{font-style:normal;color:var(--leaf);opacity:.75}
@media (prefers-reduced-motion:reduce){
  .procession__band{animation:none}
  .procession{overflow-x:auto}
}

/* ── THE DESK ────────────────────────────────────────────
   Not a chat bubble in the corner. A panel that slides from the edge like a
   drawer of records being pulled out, because that is what it is. */
.desk__tab{position:fixed;right:0;bottom:clamp(1.2rem,5vh,3rem);z-index:70;
  transform:translateX(0) rotate(0deg);transform-origin:right bottom;
  font-family:Jost,sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.85rem 1.4rem;border:1px solid var(--ink);border-right:0;background:var(--ink);
  color:var(--paper);cursor:pointer;
  transition:background var(--t-quick) var(--ease),color var(--t-quick) var(--ease),
             padding-right var(--t-base) var(--ease)}
.desk__tab:hover{background:var(--leaf);border-color:var(--leaf);color:#fff;padding-right:1.9rem}

/* ── THE DESK ─────────────────────────────────────────────
   Not a chat window. A desk, where a clerk lays the house's written record in
   front of you and shows you where each answer came from.

   Every other assistant of this kind hides its sources and performs certainty.
   This one can do the opposite, because it only ever answers from what the
   house has already published: so the record is counted in the header, the
   search across it is shown while it happens, and each answer arrives as a
   leaf of paper with its reference at the foot, the way a catalogue cites. The
   constraint is the design. */
.desk{position:fixed;inset:0;z-index:90;pointer-events:none}
.desk[data-open="true"]{pointer-events:auto}
.desk__scrim{position:absolute;inset:0;background:rgba(22,32,74,.38);opacity:0;
  backdrop-filter:blur(3px);transition:opacity var(--t-base) var(--ease)}
.desk[data-open="true"] .desk__scrim{opacity:1}
.desk__panel{position:absolute;top:0;right:0;bottom:0;width:min(536px,100%);
  background:var(--paper);border-left:var(--rule);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-enter);
  box-shadow:-30px 0 70px -38px rgba(22,32,74,.55)}
.desk[data-open="true"] .desk__panel{transform:none}

/* the head states what the record is, and how much of it there is */
.desk__head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.9rem;padding:1.25rem 1.5rem 1.1rem;border-bottom:var(--rule);
  background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.desk__head .mark{width:1.75rem;height:1.75rem}
.desk__title{font-family:"Bodoni Moda",Georgia,serif;font-size:1.24rem;margin:0;
  letter-spacing:-.01em;line-height:1.15}
.desk__count{margin:.2rem 0 0;font-family:"EB Garamond",Georgia,serif;
  font-variant-caps:small-caps;text-transform:lowercase;letter-spacing:.085em;
  font-size:.82rem;color:var(--ink-faint)}
.desk__x{background:none;border:0;cursor:pointer;color:var(--ink-faint);
  font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.1em;font-size:.86rem;
  transition:color var(--t-quick) var(--ease)}
.desk__x:hover{color:var(--ink)}

/* Content sits at the foot, against the input, so an empty desk is not a
   half-page of nothing. The conversation then grows upward into the space. */
.desk__list{flex:1;overflow-y:auto;padding:1.5rem;display:flex;
  flex-direction:column;justify-content:flex-end;gap:1.25rem}
.desk__turn{animation:rise var(--t-base) var(--ease-enter) both}
.desk__turn--asked{align-self:flex-end;max-width:88%}
.desk__asked{margin:0;background:var(--ink);color:var(--paper);padding:.66rem 1rem;
  font-size:.97rem;line-height:1.5}

/* an answer is a leaf of paper, laid down */
.desk__answer{background:#fff;border:var(--rule);padding:1.15rem 1.25rem 1rem;
  box-shadow:0 1px 0 rgba(22,32,74,.05),0 10px 26px -20px rgba(22,32,74,.4);
  position:relative}
.desk__answer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#8A6B14,#D8B44A 30%,#F1E0AB 50%,#C39A24 72%,#8A6B14)}
.desk__answer :where(p){margin:0 0 .75rem;font-size:1rem;line-height:1.7;color:var(--ink)}
.desk__answer :where(p):last-child{margin-bottom:0}
/* the citation, set as a catalogue sets one */
.desk__src{margin:.9rem 0 0 !important;padding-top:.7rem;border-top:var(--rule);
  font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.085em;
  font-size:.84rem !important;color:var(--ink-faint) !important}
.desk__src a{color:var(--lapis);text-decoration:none;
  border-bottom:1px solid rgba(42,75,160,.35)}
.desk__acts{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.8rem 0 0 !important}
.desk__acts a{font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.09em;font-size:.9rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--leaf);padding-bottom:.15rem}

/* THE RECORD BEING READ. Not three bouncing dots pretending to think: this
   states the true thing, that a fixed corpus is being searched, and the rule
   beneath it runs the length of that search. */
.desk__reading{display:flex;flex-direction:column;gap:.5rem}
.desk__reading p{margin:0;font-family:"EB Garamond",Georgia,serif;
  font-variant-caps:small-caps;text-transform:lowercase;letter-spacing:.09em;
  font-size:.86rem;color:var(--ink-faint)}
.desk__reading i{display:block;height:1px;background:rgba(22,32,74,.12);position:relative;
  overflow:hidden}
.desk__reading i::after{content:"";position:absolute;inset:0;background:var(--leaf);
  transform-origin:left;animation:reading 620ms var(--ease) forwards}
@keyframes reading{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the openers, and the related questions, as the tabs on a filing drawer */
.desk__also{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.desk__chip{font-family:"EB Garamond",Georgia,serif;font-size:.94rem;text-align:left;
  background:var(--paper-2);border:var(--rule);border-radius:0;
  color:var(--ink);padding:.44rem .8rem;cursor:pointer;line-height:1.35;
  transition:background var(--t-quick) var(--ease),border-color var(--t-quick) var(--ease),
    color var(--t-quick) var(--ease)}
.desk__chip:hover{background:#fff;border-color:var(--leaf);color:var(--lapis)}
.desk__chip:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}

.desk__ask{display:flex;border-top:var(--rule);background:var(--paper-2)}
.desk__ask input{flex:1;min-width:0;border:0;background:none;padding:1.1rem 1.5rem;
  font-family:"EB Garamond",Georgia,serif;font-size:1.02rem;color:var(--ink)}
.desk__ask input:focus{outline:2px solid var(--lapis);outline-offset:-2px}
.desk__ask button{border:0;background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.12em;font-size:.95rem;
  padding:0 1.7rem;transition:background var(--t-quick) var(--ease)}
.desk__ask button:hover{background:var(--leaf)}
@media (prefers-reduced-motion:reduce){
  .desk__turn{animation:none}
  .desk__reading i::after{animation:none;transform:scaleX(1)}}

@media print{.desk,.desk__tab{display:none !important}}
/* On a narrow screen the Ask-the-house tab sits over the hero's own footer and
   covered the telephone number — the one thing on the page a client is most
   likely to reach for. The footer keeps clear of it rather than the tab moving,
   because the tab must stay where a thumb expects to find it. */
@media (max-width:760px){
  /* The hero footer is pinned to the bottom of the wall on a wide screen, where
     there is room beneath the headline for it to sit. On a narrow one the
     headline, the paragraph and two stacked buttons fill that room, and pinned
     text simply lands on top of them. Padding could not fix that: the fault is
     the pinning, not the width. So on a phone the footer rejoins the flow and
     follows the content it belongs to, and only its last line keeps clear of
     the Ask-the-house tab. */
  /* .wall is a flex row and .wall__foot is its child, so un-pinning the footer
     alone turned it into a second column beside the headline. The wall has to
     stack as well. */
  .wall{display:block;min-height:0}
  /* the desktop clearance would eat a phone's whole column; on mobile only
     the last line steps aside, and it does so below the content now */
  .wall__foot{position:static;margin-top:clamp(2rem,7vw,3rem);padding-right:0}
  .wall__foot > :last-child{padding-right:clamp(8.5rem,40vw,11rem)}
  .wall__in{padding-block:clamp(3rem,8vw,5rem) clamp(4.5rem,14vw,6rem)}
}
@media (prefers-reduced-motion:reduce){
  .desk__panel{transition:none}.desk__turn{animation:none}
}

/* ── languages ───────────────────────────────────────────
   Each language names itself in its own script, because a reader looking for
   मराठी is not scanning a list that says "Marathi". */
.lang{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.4rem;border-top:var(--rule)}
.lang__pick{font-family:"EB Garamond",Georgia,serif;font-size:1rem;color:var(--ink);
  background:var(--paper);border:var(--rule);padding:.45rem .8rem;cursor:pointer;
  transition:border-color var(--t-quick) var(--ease)}
.lang__pick:hover{border-color:var(--lapis)}
.lang__note{margin:.8rem 0 0;color:var(--ink-faint);font-size:.86rem;line-height:1.6;max-width:64ch}
/* Arabic reads right to left; the whole document flips, so the rules that
   assume a left origin have to flip with it. */
[dir="rtl"] .desk__panel{left:0;right:auto;border-left:0;border-right:var(--rule);
  transform:translateX(-100%)}
[dir="rtl"] .desk[data-open="true"] .desk__panel{transform:none}
[dir="rtl"] .desk__tab{right:auto;left:0;border-right:1px solid var(--ink);border-left:0}
[dir="rtl"] .desk__answer{border-left:0;border-right:2px solid var(--leaf);
  padding-left:0;padding-right:1rem}
[dir="rtl"] .desk__turn--asked{align-self:flex-start}
[dir="rtl"] .notice{border-left:0;border-right:2px solid var(--sindoor);
  padding-left:0;padding-right:1.4rem}
[dir="rtl"] .head .ref{margin-left:0;margin-right:auto}
[dir="rtl"] .wall__rule{transform-origin:right center}

/* ── THE VALUATION WALK ───────────────────────────────────
   A specialist asks six questions in this order and then shows the arithmetic.
   The screen does the same, so the visitor can disagree with a judgement — the
   one thing you cannot do with a figure that arrives on its own. */
.walk{border:var(--rule);background:var(--paper);min-height:26rem;
  display:flex;flex-direction:column}
.walk__head{padding:1rem 1.5rem;border-bottom:var(--rule);background:var(--paper-2)}
.walk__body{padding:clamp(1.5rem,3.4vw,2.6rem)}
.walk__q{font-size:clamp(1.6rem,3.4vw,2.5rem);margin:0 0 .5rem}
.walk__help{margin:0 0 1.6rem;color:var(--ink-soft);max-width:52ch}

/* the artist search */
.walk__input{width:100%;border:0;border-bottom:2px solid var(--ink);
  background:none;padding:.7rem 0;font-family:"EB Garamond",Georgia,serif;
  font-size:1.3rem;color:var(--ink)}
.walk__input:focus{outline:0;border-bottom-color:var(--leaf)}
.walk__hits{margin-top:1.1rem;display:flex;flex-direction:column}
.walk__hit{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  background:none;border:0;border-bottom:var(--rule);padding:.75rem .2rem;
  cursor:pointer;text-align:left;transition:background var(--t-quick) var(--ease)}
.walk__hit:hover{background:var(--paper-2)}
.walk__hitname{font-family:"EB Garamond",Georgia,serif;font-size:1.1rem;color:var(--ink)}
.walk__hitrec{font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.08em;color:var(--leaf);white-space:nowrap}
.walk__miss{color:var(--ink-soft);max-width:56ch;margin:1rem 0 0}

/* the choices: the reason sits under the option, because the reason is the point */
.walk__opts{display:grid;gap:.6rem}
.walk__opt{display:block;text-align:left;background:var(--paper);border:var(--rule);
  padding:.9rem 1.1rem;cursor:pointer;
  transition:border-color var(--t-quick) var(--ease),background var(--t-quick) var(--ease)}
.walk__opt:hover{border-color:var(--leaf);background:#fff}
.walk__opt:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
.walk__optlabel{display:block;font-family:"EB Garamond",Georgia,serif;
  font-size:1.08rem;color:var(--ink);margin-bottom:.2rem}
.walk__optwhy{display:block;font-size:.92rem;color:var(--ink-faint);line-height:1.55}
.walk__back{margin-top:1.6rem;background:none;border:0;cursor:pointer;
  font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.09em;font-size:.95rem;color:var(--ink-faint);
  border-bottom:1px solid var(--ink-faint);padding:0 0 .15rem}
.walk__back:hover{color:var(--ink);border-bottom-color:var(--leaf)}

/* the view */
.walk__figure{font-size:clamp(2rem,5.4vw,3.6rem);margin:.3rem 0 .7rem;color:var(--lapis)}
.walk__basis{margin:0 0 1.8rem;color:var(--ink-soft);max-width:54ch}
.walk__anchor{border-left:2px solid var(--leaf);padding:.2rem 0 .2rem 1.1rem;margin:0 0 1.8rem}
.walk__anchorfig{margin:.3rem 0 .1rem;font-size:1.12rem;color:var(--ink)}
.walk__anchorsale{margin:0 0 .5rem;color:var(--ink-faint);font-size:.94rem}
.walk__anchornote{margin:0;color:var(--ink-soft);max-width:58ch;font-size:.96rem}
.walk__working{margin:0 0 1.8rem}
.walk__rows{border-top:var(--rule)}
.walk__row{display:grid;grid-template-columns:11rem 1fr 4rem;gap:.3rem 1rem;
  border-bottom:var(--rule);padding:.75rem 0}
.walk__rowk{font-family:"EB Garamond",Georgia,serif;font-variant-caps:small-caps;
  text-transform:lowercase;letter-spacing:.085em;color:var(--ink-faint)}
.walk__rowv{color:var(--ink)}
.walk__rowf{text-align:right;color:var(--lapis);font-variant-numeric:tabular-nums}
.walk__roww{grid-column:2/4;color:var(--ink-faint);font-size:.92rem;line-height:1.55}
.walk__limits{border:var(--rule);background:var(--paper-2);padding:1.2rem 1.3rem;margin:0 0 1.8rem}
.walk__limits p{margin:.55rem 0 0;color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:60ch}
.walk__limits p.util{margin:0}
.walk__acts{display:flex;gap:1rem;flex-wrap:wrap}
@media (max-width:640px){
  .walk__row{grid-template-columns:1fr 4rem}
  .walk__rowk{grid-column:1/3}
  .walk__roww{grid-column:1/3}
}