/* Shivangi Verma Couture storefront.

   The rule of this sheet, and the reason it was rewritten: a block is defined
   by a rule, a ground, or its own whitespace. Never by a box drawn around it.
   The only bordered thing left on the site is the quantity stepper, which is a
   control rather than a container.

   Type. Bodoni Moda is optically sized, so a large headline is set from the
   display cut and a 20px product name from the text cut. One typeface doing
   two jobs properly is what stops a page reading as the same serif at every
   size. It is never asked for below weight 500: a didone's thins at 400 are
   hairlines on a bright ground, which is tiring rather than elegant.

   Archivo carries the labels, figures and body copy. v0.8.0 used Jost there
   and it was the wrong call: a Futura relative has a small x-height, closed
   apertures and circular bowls, which read beautifully at 90px and badly at
   15px. Caps labels are also set larger and tracked far less than they were,
   because heavy letterspacing on small caps is the most fatiguing thing a
   page like this can do to a reader.

   Palette and mark: clients/shivangi-verma-couture/brand.md. */

:root{
  --paper:#FAFBF7;--paper-warm:#F1F4EE;
  --ivory:#E6ECE1;--ivory-line:#D5DECE;--ivory-deep:#DCE5D5;
  --hair:#DFE5D9;--rule:#CDD6C6;
  --ink:#1E231D;--body:#3A4238;--mute:#535D50;
  /* --faint was #857F75, which measures 3.78:1 on paper and 3.23:1 on ivory.
     AA wants 4.5:1 for text this size and it carries real information: a
     struck original price, a sold out size, an optional field. #6B665E is
     5.42:1 on paper and 4.63:1 on ivory, and still a clear step lighter than
     --mute at 7.03:1, so the hierarchy survives the fix. */
  --faint:#5F695B;
  --gold:#8C7134;--gold-deep:#7A5E2A;--gold-bright:#9A7B3C;--gold-pale:#C9B380;
  --olive:#4B5A2E;--olive-pale:#7C8A5C;
  --charcoal:#18221C;--red:#8A2224;

  /* The colour blocks. Shivangi asked for a more colourful storefront, and the
     page was 80% one beige: of 3.46M px of ground on the home page, 2.77M was
     ivory. These are dyes rather than decoration, indigo and a deep maroon
     drawn from the same tradition the clothes are, and they are used as whole
     grounds so that scrolling the page moves through colour instead of one
     continuous cream.
     Contrast against them, measured: ivory 10.4:1 on indigo and 9.8:1 on
     maroon, bright gold 5.3:1 and 5.0:1. Both clear AA for body text, which is
     why these two depths and not the lighter versions. */
  /* GREENS, 23 September 2026. Green is Shivangi's lucky colour and she asked
     for subtle shades of it across the site, as in the order emails. The
     indigo became a deep teal green and the maroon a forest green, and every
     beige ground and warm grey moved to a sage of the same lightness.

     The trap the note below describes is real and was measured, not assumed:
     the logo's green dress averages #414721, and the email's bottle green
     #2F4A3A sits at 1.01:1 against it, so the dress vanished. What separates
     it is hue, not lightness (indigo was only 1.31:1 too). Teal #173A3E leans
     blue-green, well away from the dress's yellow-green, and it is the ground
     under the logo in the hero and the Made to order band. The forest green
     carries no logo, so it can be a truer green.

     Text on the new grounds, measured: on-dark 10.8:1 on teal and 10.4:1 on
     forest, gold-lit 5.1:1 and 4.9:1, faint 5.5:1 on paper and 4.8:1 on the
     sage ivory. The notes further down quote the old numbers. */
  --teal:#173A3E;--teal-line:#27505A;
  /* Maroon rather than a green for the second block. The brand mark is a
     green dress and a gold one, and on a green ground the green one sank
     into it. On maroon both stand off it, and the page gains a third
     colour rather than two blues and a green. */
  --forest:#223D2E;--forest-line:#34563F;
  --on-dark:#EEF2EA;--on-dark-soft:#C8D3C3;--gold-lit:#C9A227;

  /* Curve and lift. Shashank: the site looks too boxy, give it curved
     elements and subtle shadows.

     Four steps, not one. A single radius stamped on everything is the same
     mistake as the single border this sheet was rewritten to remove: it makes
     every block look like the same kind of object. The step says what a thing
     IS. 6px is a small control, 10px a button, 14px a photograph or a panel,
     and the pill is for a chip you choose between.

     The shadows are warm. Black on this cream goes muddy grey, so these are
     mixed from a brown, 58/42/20, at very low alpha and over a long distance,
     which is what reads as a soft light in a room rather than a drop shadow.
     --lift-dark is for a photograph sitting on the indigo or the maroon,
     where a brown shadow does nothing and only something darker than the
     ground will show. */
  --r-1:6px;--r-2:10px;--r-3:14px;--r-pill:999px;
  --lift-1:0 1px 2px rgba(28,44,30,.05), 0 4px 14px rgba(28,44,30,.055);
  --lift-2:0 3px 8px rgba(28,44,30,.07), 0 18px 38px rgba(28,44,30,.10);
  --lift-dark:0 10px 34px rgba(5,16,14,.36);

  --display:"Bodoni Moda","Didot","Bodoni MT","Playfair Display",Georgia,serif;
  /* Archivo, not a geometric. Jost is a Futura relative: small x-height,
     closed apertures, circular bowls. It is handsome in a 90px headline and
     genuinely tiring at 15px, which is what shipped in v0.8.0. */
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* A crosshatch at the weight of a fabric weave: two hairline gratings at
     opposing 45s, three per cent ink. Reads on ivory, vanishes on paper. */
  --weave:repeating-linear-gradient(45deg,rgba(30,35,29,.030) 0 1px,transparent 1px 7px),
          repeating-linear-gradient(-45deg,rgba(30,35,29,.030) 0 1px,transparent 1px 7px);
  --weave-lit:
    repeating-linear-gradient(45deg, rgba(238,242,234,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(238,242,234,.05) 0 1px, transparent 1px 7px);
}

*{box-sizing:border-box}

/* One focus style for the whole site.
   There were three: the zoomer, the lightbox and form fields. Everything else
   fell back to whatever the browser draws, which on a custom design is either
   invisible against the ground or an outline nobody chose. A keyboard user or
   anyone on a switch device loses their place, and there is no way to see that
   in a screenshot. :focus-visible rather than :focus, so a mouse click never
   draws it. */
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
/* On the dark grounds the deep gold disappears, so the outline is the ivory
   the text on those grounds already uses. */
.hero :focus-visible,.featureband :focus-visible,.mtoband :focus-visible,
.summary :focus-visible,footer.site :focus-visible,.co-block.mto :focus-visible,
.lbx :focus-visible{outline-color:var(--on-dark)}

/* The skip link. Off screen until it is focused, then the first thing on the
   page. Without it a keyboard user tabs the whole header on every single page
   before reaching anything they came for. */
.skip{
  position:absolute;left:12px;top:-100px;z-index:100;
  background:var(--teal);color:var(--on-dark);
  padding:13px 20px;border-radius:var(--r-2);box-shadow:var(--lift-2);
  font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  transition:top .18s ease;
}
.skip:focus{top:12px}
html,body{margin:0;padding:0}
body{
  font:400 16.5px/1.62 var(--sans);
  color:var(--ink);background:var(--paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* Bodoni's optical size axis thins the hairlines as the type grows. That is
   the whole reason "Noor", "Rehana" and "Ira" read as washed out: at 25px on a
   card and 46px on a product page, the thin strokes were being drawn at the
   display cut's weight and all but disappearing on a bright ground.
   Pinning opsz to a text cut keeps the sturdy letterforms at every size, and
   size then comes from font-size alone, which is what a reader expects. */
h1,h2,h3{font-optical-sizing:auto}
.hero h1,.head h1,.ftext h2,.bandtext h2,.card .t,.buy h1,.summary h2,
.line .n,.co-block h2,.ordh2,.ordhead h1,.sandbox h1,.sb-order b,
.measure > .t,.mto-box b,.tag,.sizes label.mto,.mset .note,.empty,
.bagempty p,footer .fline,.serif{
  font-optical-sizing:none;
  font-variation-settings:"opsz" 14;
}
::selection{background:var(--ivory-deep);color:var(--ink)}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,34px)}

/* Full-bleed band inside a wrapped main. The negative margin cancels the wrap's
   own offset exactly, so the band reaches both edges of the viewport and the
   .wrap nested inside it re-finds the type column. */
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}

.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.serif{font-family:var(--display)}

/* A rule with a word set into it. This is the site's section divider and it
   replaces what used to be a heading sitting on top of a bordered box. */
.sechead{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);margin:0 0 clamp(24px,4vw,46px)}
.sechead i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent)}
/* --gold-deep, not --gold. The brand gold is 4.41:1 on paper and fails AA at
   this size, and this eyebrow is the most repeated small text on the site.
   --gold-deep is 5.77:1. The brand gold stays where it is not text: rules,
   borders, the hover underline. */
.sechead span,.sechead h2{margin:0;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}

/* A gold underline that retracts under the cursor rather than appearing. */
.linkgold{display:inline-flex;align-items:center;gap:13px;font-size:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep);background:none;border:0;padding:0;font-family:var(--sans);cursor:pointer}
.linkgold span{position:relative;padding-bottom:7px;display:inline-block}
.linkgold span:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.linkgold:hover span:after{transform:scaleX(.35)}
.linkgold:before{content:"";width:24px;height:1px;background:var(--gold);order:2;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.linkgold:hover:before{width:44px}

/* ---------------------------------------------------------------- header */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,245,.94);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .3s ease;
}
/* The bar only lifts once the page has moved under it. At rest it is part of
   the page and a shadow would be a shadow cast by nothing. */
header.site.scrolled{box-shadow:var(--lift-1)}
/* One row: the lockup signs the left, the navigation closes the right. The
   centred two row version cost about 170px of every screen before the page
   began, which is more rent than a logo gets to charge. */
/* padding-block, never a shorthand with 0 sides: .bar is also .wrap, and a
   shorthand here cancels the page gutters, which is why the navigation sat
   flush against the edge of a phone while the content below it was inset. */
.bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,4vw,52px);padding-block:13px;transition:padding .3s ease}
/* 43px, one short, because the height came off the lockup's aspect ratio. */
.brand{display:flex;align-items:center;min-height:44px;flex:none}
.brand img{width:clamp(196px,19vw,272px);height:auto;display:block;transition:width .3s ease,opacity .3s ease}
.brand:hover img{opacity:.84}
header.site.scrolled .bar{padding-block:8px}
header.site.scrolled .brand img{width:clamp(168px,15vw,212px)}

.navin{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);min-width:0}
nav.cats{display:flex;gap:clamp(14px,2.2vw,30px);flex-wrap:wrap;justify-content:flex-end;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--body);font-weight:500}
/* 44px tall, from 38. Real padding rather than a pseudo-element: a transparent
   ::before was measured here and it did not answer a tap at the edges, and a
   hit area that only exists in the stylesheet is worse than none, because it
   looks fixed. The gold underline is positioned against this box, so it moves
   up by the padding that was added and stays under the word rather than
   drifting to the bottom of a taller box. Both numbers are measured. */
nav.cats a{padding:12px 0;position:relative;white-space:nowrap}
nav.cats a:after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
nav.cats a:hover:after,nav.cats a.on:after{transform:scaleX(1)}
nav.cats a.on{color:var(--ink)}
/* The bag is drawn, not labelled, and the count lives inside it rather than on
   a pill beside it.

   It used to hop. Shashank's call, and it is the right one: "it is not going
   with the brand image". A hopping bag is a high street gesture and this label
   is not that. The account mark keeps its eyes, because a face that glances and
   blinks is quiet enough to read as craft rather than as a cartoon, where a
   piece of luggage jumping on the spot never will.

   So there is exactly one moving thing in the header now, and it is the one
   that earns it. */
/* min-height, not a bigger drawing. line-height:0 collapsed these anchors to
   the height of the artwork, 33px, and they are the two most pressed controls
   on the site. The width stays the drawing plus the padding that separates the
   pair, which is what keeps one from taking the other's taps. */
.bag{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;color:var(--body);padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--hair);line-height:0}
.bagicon{position:relative;display:block;width:29px;height:32.9px}
.bagicon svg{width:100%;height:100%;display:block;overflow:visible}
.bagnum{
  position:absolute;left:0;right:0;top:64%;transform:translateY(-50%);
  text-align:center;font-style:normal;font-weight:600;font-size:11.5px;line-height:1;
  letter-spacing:0;color:var(--gold-deep);font-variant-numeric:tabular-nums;
}
.bag:hover{color:var(--gold-deep)}
/* Darker on hover and when the bag is the page you are on, not lighter.
   --gold-bright is 3.79:1 on paper, which put the one number in the header a
   customer actually needs to read below AA whenever they were looking at it. */
.bag:hover .bagnum,.bag.on .bagnum{color:#6F551F}
.bag.on{color:var(--gold-deep)}


/* ------------------------------------------------------------------ hero */
/* The first screen is the one she was looking at when she said the site
   needed colour, so it is the one that changes most. Indigo ground, the
   mark glowing on it in gold rather than sitting quietly on cream. */
.hero{position:relative;background:var(--teal);background-image:var(--weave-lit);overflow:hidden;isolation:isolate;min-height:clamp(430px,56vw,780px);display:flex;align-items:center}
/* The scrim now darkens toward the text rather than lightening, so the
   headline has a solid ground and the mark keeps the right hand side. */
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(23,58,62,.97) 0%,rgba(23,58,62,.88) 26%,rgba(23,58,62,.34) 50%,rgba(23,58,62,0) 66%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal-line);z-index:3}
.heromark{position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:min(640px,50vw);height:auto;z-index:0;pointer-events:none;opacity:.95}

/* The photograph in the hero.
   It holds the right of the frame and dissolves into the indigo rather than
   ending on an edge, which is what a cut-out photograph on a coloured ground
   always looks like otherwise. The mask does the dissolving; the scrim above
   only has to protect the text, so it now clears the right side entirely
   instead of laying a second fade over the first and muddying both. */
/* An 880px window on a 660px band is 4:3; these photographs are 2:3. cover was
   therefore throwing away half of every frame, and the half it kept was the
   half with the face in it. Pushing the crop further down the frame instead
   was tried and is worse, it lands on the chest.

   Two rules hold the panel now.

   1. It is sized against the band's height, not the viewport's width, so the
      frame is never squeezed into a landscape window again. 600 by 780 keeps
      86.8 per cent of the frame at any width above about 1460, and more than
      that below it, because the cap stops the width before the band stops
      growing.
   2. object-position is bottom anchored, so whatever has to go comes off the
      TOP. On a standing figure shot portrait the top is headroom, ceiling and
      chandelier. The hem can never be the thing that gets cut, whichever
      photograph she makes first on the featured piece. 13 per cent is the
      most that can come off the top before the shortest headroom of the five
      frames supplied starts losing hair, which is what sets the width.

   max-width is the guard for a photograph that is not portrait; cover crops
   the sides then, which is the harmless direction. */
.heroshot{
  position:absolute;right:0;top:0;height:100%;width:min(41%,600px);max-width:none;
  object-fit:cover;object-position:50% 100%;
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 11%,rgba(0,0,0,.90) 36%,#000 58%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 11%,rgba(0,0,0,.90) 36%,#000 58%);
}
.heroin{position:relative;z-index:2;width:100%;padding-top:clamp(46px,7.4vw,100px);padding-bottom:clamp(44px,7vw,94px)}
.herotext{max-width:620px}
.hero h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(40px,6.6vw,86px);line-height:1.0;letter-spacing:-.015em;
  margin:18px 0 22px;color:var(--on-dark);text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-lit)}
.lede{font-size:clamp(16px,1.5vw,19px);line-height:1.66;color:var(--body);max-width:44ch;margin:0 0 32px;font-weight:400}
/* Everything inside the hero is now sitting on a dark ground. */
.hero .lede{color:var(--on-dark-soft)}
.hero .eyebrow{color:var(--gold-lit)}
.hero .linkgold{color:var(--gold-lit)}
.hero .linkgold span:after,.hero .linkgold:before{background:var(--gold-lit)}
.heromark{filter:drop-shadow(0 10px 40px rgba(0,0,0,.45))}

/* A charcoal strip with three promises, the only dark band above the footer.
   It gives the page a horizontal beat between hero and catalogue. */
.marquee{background:var(--charcoal);color:#C3CCBF}
.mq{display:flex;align-items:center;justify-content:center;gap:clamp(13px,3vw,40px);padding:16px 20px;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;flex-wrap:wrap;text-align:center}
.mq i{width:5px;height:5px;background:var(--gold-bright);transform:rotate(45deg);flex:none}
@media (max-width:620px){
  .mq{gap:7px;padding-block:14px;flex-direction:column}
  .mq i{display:none}
}

/* --------------------------------------------------------- featured piece */
/* The image column is capped in WIDTH, not cropped by height. A portrait
   frame sized off a 1240px grid track grows to 900px tall and the band
   stops fitting on a laptop screen, which is what happened. Capping the
   track keeps the whole composition and gives the text room it did not
   have when the photograph was taking four fifths of the row. */
/* The featured piece is the middle of the page, and the middle of the page was
   2,400px of unbroken cream between the hero and the made to order band. It now
   carries the second dye, so the page alternates: indigo, maroon, the catalogue
   on cream where the clothes need a neutral, then indigo again. Two colours
   used three times reads as a decision. Three colours reads as bunting. */
.featureband{margin-bottom:clamp(40px,6vw,76px);background:var(--forest);background-image:var(--weave-lit);border-top:1px solid var(--forest-line);border-bottom:1px solid var(--forest-line)}
.featureband .eyebrow{color:var(--gold-lit)}
.featureband .ftext h2{color:var(--on-dark)}
.featureband .ftext p{color:var(--on-dark-soft)}
.featureband .fprice{color:var(--on-dark)}
/* On the forest green, #B5C2B0 is 6.37:1 and still quieter than the live price. */
.featureband .fprice s{color:#B5C2B0}
.featureband .linkgold{color:var(--gold-lit)}
.featureband .linkgold span:after,.featureband .linkgold:before{background:var(--gold-lit)}

/* The two calls to action on the home page are buttons, not underlined words.
   They are the two places the page is trying to send someone, and at 26px tall
   neither looked pressable (UX audit item 7, open since 16 September). Gold on
   the jewel ground, as the order summary already does: teal text on gold-lit
   is 5.1:1, and the hover wipes to ivory at 10.8:1. Only on a band, so a
   cream page keeps its quieter gold link. */
.cta.onband{
  display:inline-flex;align-items:center;gap:14px;width:auto;margin-top:6px;
  padding:16px 26px;min-height:50px;
  background-color:var(--gold-lit);color:var(--teal);
  background-image:linear-gradient(var(--on-dark),var(--on-dark));
  box-shadow:var(--lift-dark);
}
.cta.onband:after{content:"";width:18px;height:1px;background:currentColor;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.cta.onband:hover{box-shadow:var(--lift-dark)}
.cta.onband:hover:after{width:30px}
/* padding-block. .feature is a .wrap now, and a shorthand with 0 sides
   cancels the gutters it needs, which put the headline hard against the
   left edge of a phone. Same fault as .bar and the footer in v0.9.14. */
.feature{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(26px,4.4vw,64px);align-items:center;padding-block:clamp(34px,4.6vw,64px) clamp(30px,4vw,56px)}
/* lift-dark, not lift-1: this one sits on the indigo band, where a brown
   shadow is invisible. */
.fimg{display:block;position:relative;aspect-ratio:4/5;background:var(--ivory);background-image:var(--weave);overflow:hidden;border-radius:var(--r-3);box-shadow:var(--lift-dark)}
.fimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.feature:hover .fimg img{transform:scale(1.04)}
.fimg .fnum{position:absolute;left:0;top:0;background:var(--paper);color:var(--gold-deep);font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;padding:11px 16px}
.ftext h2{font-family:var(--display);font-weight:650;font-size:clamp(28px,4.2vw,56px);line-height:1.04;letter-spacing:-.016em;margin:14px 0 18px;text-wrap:balance}
.ftext p{color:var(--body);margin:0 0 20px;max-width:46ch}
.fprice{font-size:14.5px;letter-spacing:.05em;color:var(--ink);font-variant-numeric:tabular-nums;margin:0 0 26px}
.fprice s{color:var(--faint)}

/* ------------------------------------------------------------ page header */
/* padding-block: .head is a .wrap inside the band. */
.headband{background:var(--teal);background-image:var(--weave-lit);border-bottom:1px solid var(--teal-line);margin-bottom:clamp(30px,4vw,52px)}
/* .headband .head, not .headband, so these beat the .head rules below rather
   than tying with them on specificity and losing on source order. Measured
   before the fix: the collection name was rendering at --ink on indigo, about
   1.4:1, which is a heading nobody can read. */
.headband .head .eyebrow{color:var(--gold-lit)}
.headband .head h1{color:var(--on-dark)}
.headband .head p{color:var(--on-dark-soft)}
.head{padding-block:clamp(34px,5vw,60px) clamp(16px,2.4vw,26px);display:flex;flex-direction:column;gap:12px}
.head h1{font-family:var(--display);font-weight:650;font-size:clamp(32px,4.6vw,58px);line-height:1.04;letter-spacing:-.016em;margin:0;color:var(--ink);text-wrap:balance}
.head p{margin:0;color:var(--body);max-width:56ch}
.head.mid{align-items:center;text-align:center}
.head.mid p{max-width:52ch}

/* ------------------------------------------------------------------ grid */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
  gap:clamp(34px,4.4vw,64px) clamp(16px,2.6vw,34px);
  padding:0 0 clamp(48px,7vw,90px);
}
/* The middle column drops. Three identical columns with level tops is the
   thing that made the old page read as a spreadsheet. */
.grid .card:nth-child(3n+2){margin-top:clamp(0px,4.4vw,58px)}
.grid.rel{grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,34px);padding-bottom:0}
.grid.rel .card:nth-child(3n+2){margin-top:0}

.card{display:block;position:relative}
.card .ph{aspect-ratio:3/4;background:var(--ivory);background-image:var(--weave);overflow:hidden;position:relative;border-radius:var(--r-3);box-shadow:var(--lift-1);transition:box-shadow .5s cubic-bezier(.2,.7,.2,1)}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.045)}
.card:hover .ph{box-shadow:var(--lift-2)}
.card .ph .second{position:absolute;inset:0;opacity:0;transition:opacity .65s ease}
.card:hover .ph .second{opacity:1}
.card .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(27,26,23,.34));opacity:0;transition:opacity .5s ease;z-index:1}
.card:hover .ph:after{opacity:1}
.card .look{position:absolute;left:0;right:0;bottom:18px;z-index:2;text-align:center;color:#F4F0E8;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.card:hover .look{opacity:1;transform:none}
/* No index numerals on the cards. A catalogue ordered by publication date is
   not a sequence, and the count would restart at 01 on page two, which is a
   number that means nothing. The drop, the scale and the italic carry it. */
.cap{margin-top:17px}
.card .t{font-family:var(--display);font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.14;letter-spacing:-.006em;color:var(--ink)}
.card .p{color:var(--mute);font-size:13.5px;letter-spacing:.04em;margin-top:7px;font-variant-numeric:tabular-nums}
.card .p s{color:var(--faint)}
/* A price never breaks inside itself. At two columns on a phone "INR 10,500.00
   INR 15,000.00" is wider than the card, and it used to break after the struck
   "INR", leaving the currency on one line and its figure on the next. Now each
   figure is an unbreakable item and the struck one moves down whole. Design
   review, 24 September 2026. */
.card .p,.fprice,.buy .price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:11px;row-gap:2px;white-space:nowrap}
.tag{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:16.5px;line-height:1.3;color:var(--olive);margin-top:8px}
.empty{padding:clamp(70px,11vw,120px) 0;text-align:center;color:var(--mute);font-family:var(--display);font-style:italic;font-size:clamp(21px,2.6vw,30px)}

/* ------------------------------------------------------- made to order band */
/* The second block, deep enough to carry gold text at 5.0:1. */
.band{background:var(--teal);background-image:var(--weave-lit);border-top:1px solid var(--teal-line);border-bottom:1px solid var(--teal-line)}
.band .eyebrow{color:var(--gold-lit)}
.bandtext h2{color:var(--on-dark)}
.bandtext h2 em{color:var(--gold-lit)}
.band .bandtext p{color:var(--on-dark-soft)}
.band .beats li{color:var(--on-dark-soft);border-color:var(--teal-line)}
.band .beats li:before{color:var(--gold-lit)}
.bandimg img{filter:drop-shadow(0 10px 34px rgba(0,0,0,.4))}
.bandin{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,5vw,70px);align-items:center;padding-top:clamp(42px,6vw,86px);padding-bottom:clamp(42px,6vw,86px)}
.bandimg{display:flex;justify-content:center}
.bandimg img{width:min(330px,68%);height:auto}
.bandtext h2{font-family:var(--display);font-weight:650;font-size:clamp(27px,3.6vw,46px);line-height:1.06;letter-spacing:-.014em;margin:14px 0 16px}
.bandtext h2 em{font-style:italic}
.bandtext p{color:var(--body);margin:0 0 20px;max-width:52ch}
.beats{list-style:none;margin:0;padding:0;display:grid;gap:0}
.beats li{position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--ivory-line);font-size:15px;color:var(--body)}
.beats li:last-child{border-bottom:1px solid var(--ivory-line)}
.beats li:before{content:"";position:absolute;left:2px;top:19px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* --------------------------------------------------------- product page */
.product{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(26px,4.4vw,68px);align-items:start;padding:clamp(18px,2.2vw,32px) 0 clamp(46px,6vw,80px)}
/* The GARMENT follows you down the page, not the buy panel.
   .buy was sticky and on a Made to Order piece it is about 1,450px tall, so it
   never engaged: a sticky element taller than the viewport has nowhere to stick
   to. Meanwhile the photograph scrolled away, and somebody filling in seven
   measurements was doing it with no sight of the thing being measured for.
   The gallery is about 660px, so it engages, and its containing block is the
   whole product grid. On a short laptop viewport it simply scrolls as before.
   position:sticky also establishes the containing block that the zoom cue and
   the thumbnails were relying on relative for. */
.gallery{position:sticky;top:104px}
.gallery .main{aspect-ratio:3/4;background:var(--ivory);background-image:var(--weave);overflow:hidden;position:relative;border-radius:var(--r-3);box-shadow:var(--lift-1)}
/* Phone only: dots over the photograph in place of the thumbnail strip. */
.gallery .dots{display:none}
.gallery .main img{width:100%;height:100%;object-fit:cover;display:block}

/* The magnifier. The origin follows the cursor through two custom properties
   set on mousemove, and is deliberately NOT in the transition: animating the
   origin as well makes the image swim along behind the pointer instead of
   sitting under it. Pointer-only, so a touch device just gets the tap. */
.zoomer{display:block;width:100%;height:100%;padding:0;border:0;background:none;overflow:hidden;position:relative;cursor:zoom-in;font:inherit;color:inherit}
.zoomer img{transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.zoomcue{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(27,26,23,.72);color:#F4F0E8;padding:7px 14px;
  font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .3s ease;pointer-events:none;white-space:nowrap;
  border-radius:var(--r-pill);
}
@media (hover:hover) and (pointer:fine){
  .zoomer:hover img{transform:scale(2.1)}
  .zoomer:hover .zoomcue{opacity:1}
}
.zoomer:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* Left and right arrows on the product photograph. A paper disc so the chevron
   reads on a dark garment and a pale one alike; 44px for a thumb. */
.gnav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:44px;height:44px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(250,251,247,.86);color:var(--teal);
  box-shadow:0 2px 10px rgba(23,40,30,.16);
  transition:background .2s ease,transform .2s ease;
}
.gnav.prev{left:12px}
.gnav.next{right:12px}
.gnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gnav:hover{background:var(--paper)}
.gnav:active{transform:translateY(-50%) scale(.94)}
.gnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------- lightbox */
/* Thumbs, not cursors.
   Measured at 390px: "Remove" on a bag line was a 16px tall target sitting
   beside the quantity buttons, "Continue shopping" and "Back to your bag" the
   same, and the category crumb on a product page was 12px. Anything under about
   30px is a coin toss on a phone, and Remove is destructive.

   Padding was the obvious fix and the wrong one: these links are underlined with
   a border, so padding pushed the rule away from the word and left it floating
   ten pixels below. This grows only the area that answers a tap, using a
   pseudo-element centred on the link. Nothing moves, nothing is drawn, and the
   underline stays where it belongs. */
@media (max-width:640px){
  .linkbtn,
  .summary .sumnote a,
  .line .mid .n,
  .crumb a,
  .authalt a,
  .acctempty .co-help a,
  .polink,
  .foolegal a,
  .credit,
  a.linkgold{
    position:relative;
  }
  .linkbtn::after,
  .summary .sumnote a::after,
  .line .mid .n::after,
  .crumb a::after,
  .authalt a::after,
  .acctempty .co-help a::after,
  .polink::after,
  .foolegal a::after,
  .credit::after,
  a.linkgold::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:50%;
    transform:translateY(-50%);
    height:44px;
  }
  /* The bag row packs price, stepper and Remove onto one line, so an expander
     as wide as the link would sit under the stepper. Keep it to the word. */
  .line .right .linkbtn::after{left:-6px;right:-6px}
}

/* These garments are photographed portrait, and a laptop is landscape, so the
   height is the only dimension that matters here. The padding used to be up to
   56px a side: on a 690px tall window that is 112px, a sixth of the screen,
   spent on nothing, and the enlarged image came out 386px wide against the
   440px one already on the page. Clicking "enlarge" made the picture smaller.
   The frame is now thin at the sides and thinner still top and bottom. */
.lbx{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(20,19,16,.95);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:10px clamp(48px,7vw,96px);cursor:zoom-out;animation:lbxin .25s ease;
}
@keyframes lbxin{from{opacity:0}to{opacity:1}}
.lbx-img{max-width:100%;max-height:100%;object-fit:contain;display:block;cursor:default;box-shadow:0 30px 90px rgba(0,0,0,.5);border-radius:var(--r-2)}
/* Nothing to gain from a caption strip: the count sits over the image instead. */
@media (max-width:640px){.lbx{padding:6px 44px}}
.lbx-x,.lbx-nav{
  position:absolute;background:none;border:0;color:#EEF2EA;cursor:pointer;
  font-family:var(--display);line-height:1;padding:10px 16px;opacity:.7;transition:opacity .2s ease;
  border-radius:var(--r-pill);
}
.lbx-x:hover,.lbx-nav:hover{opacity:1}
.lbx-x{top:clamp(8px,2vw,20px);right:clamp(8px,2vw,24px);font-size:40px}
.lbx-nav{top:50%;transform:translateY(-50%);font-size:64px}
.lbx-nav.prev{left:clamp(2px,1.5vw,18px)}
.lbx-nav.next{right:clamp(2px,1.5vw,18px)}
.lbx-x:focus-visible,.lbx-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px;opacity:1}
.lbx-count{
  position:absolute;bottom:clamp(10px,2.4vw,26px);left:50%;transform:translateX(-50%);
  color:#A7B2A3;font-size:11.5px;letter-spacing:.2em;font-variant-numeric:tabular-nums;
}
@media (max-width:640px){.lbx-nav{font-size:44px}.lbx-x{font-size:32px}}
.gallery .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
.gallery .thumbs img{width:100%;aspect-ratio:3/4;object-fit:cover;cursor:pointer;opacity:.55;transition:opacity .35s ease;display:block;border-radius:var(--r-1)}
.gallery .thumbs img:hover{opacity:.85}
.gallery .thumbs img.on{opacity:1;box-shadow:0 2px 0 var(--gold)}

.buy .crumb{font-size:11.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep)}
.buy h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);margin:10px 0 10px;line-height:1.04;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.buy .price{font-size:16px;letter-spacing:.05em;color:var(--ink);margin:0 0 22px;font-variant-numeric:tabular-nums}
.buy .price s{color:var(--faint)}
.buy .short{color:var(--body);margin:0 0 20px;max-width:46ch}
.buy .crumb.lbl{margin-top:6px;color:var(--mute)}

/* The size guide lives beside the chips now, not four accordions below the buy
   button. Its own row so the link sits opposite the label rather than beside
   it, which keeps it findable without competing with the word "Size". */
.szhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:20px}
.szguide{
  border:0;background:none;padding:6px 0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;min-height:44px;display:inline-flex;align-items:center;
}
.szguide:hover{color:var(--ink)}
.szchart{margin:14px 0 4px;padding:14px 16px;background:var(--ivory);border-radius:var(--r-2);box-shadow:var(--lift-1);overflow-x:auto}
.szchart .chart{margin:0}
.szchart caption{caption-side:top;text-align:left;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-bottom:9px}
.szmto{margin:11px 0 0;font-size:13.5px;color:var(--body)}
/* IN / CM unit toggle inside the size chart */
.szunit{display:inline-flex;background:var(--rule);border-radius:20px;padding:3px;margin-bottom:12px;gap:0}
.szunit button{border:none;background:transparent;border-radius:17px;padding:5px 18px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--mute);cursor:pointer;transition:background .15s,color .15s}
.szunit button.active{background:var(--ink);color:var(--paper)}

.sizes{display:flex;flex-wrap:wrap;gap:9px;margin:11px 0 4px}
.sizes label{
  border:1px solid var(--rule);background:transparent;color:var(--body);
  padding:10px 19px;min-height:44px;display:inline-flex;align-items:center;
  cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;position:relative;
  border-radius:var(--r-pill);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.sizes label:hover{border-color:var(--gold-pale);color:var(--ink)}
/* Indigo, not ink. Shashank: no black in the buttons. Indigo is the ground
   the hero, the summary and the made to order band already use, so the chosen
   size belongs to the brand rather than being a neutral. Ivory on it measures
   12.1:1. Made to Order stays olive, which now reads as a different KIND of
   choice rather than the same choice in a second colour. */
.sizes label:has(input:checked){border-color:var(--teal);background:var(--teal);color:var(--paper)}
.sizes label.out{color:var(--faint);text-decoration:line-through;cursor:not-allowed;border-style:dotted}
.sizes label.mto{font-family:var(--display);font-style:italic;font-weight:500;font-size:16.5px;letter-spacing:.01em;text-transform:none;padding:7px 18px;min-height:44px;border-color:var(--olive-pale);color:var(--olive)}
.sizes label.mto:has(input:checked){background:var(--olive);border-color:var(--olive);color:var(--paper)}
.sizes input{position:absolute;opacity:0;pointer-events:none}
/* One size: stated, in the chips' own lettering, with nothing to press. */
.onesize{margin:11px 0 4px;font-size:13px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.note{font-size:14.5px;color:var(--body);margin:8px 0 0}

/* Panels carry a ground and a gold spine, not an outline. */
.panel{background:var(--ivory);background-image:var(--weave);border-left:2px solid var(--gold);padding:17px 20px;margin:20px 0 0;border-radius:var(--r-3)}
.mto-box{background:var(--forest);background-image:var(--weave-lit);border-left:2px solid var(--gold-lit);padding:18px 22px;margin:20px 0 0;font-size:14.5px;color:var(--on-dark-soft);border-radius:var(--r-3)}
.mto-box b{display:block;margin-bottom:5px;font-family:var(--display);font-style:italic;font-weight:600;font-size:21px;color:var(--on-dark);letter-spacing:-.005em}
.measure{background:var(--paper-warm);border-left:2px solid var(--gold);padding:20px;margin:14px 0 0;border-radius:var(--r-3)}
.measure > .t{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);margin-bottom:4px;letter-spacing:-.006em}
.measure > .s{font-size:14.5px;color:var(--body);margin-bottom:18px;max-width:48ch}
.units{display:flex;gap:9px;margin-bottom:16px}
/* 38px. It is the first thing touched on a panel that asks for seven numbers,
   and getting it wrong means the whole set is in the wrong unit. */
.units label{border:1px solid var(--rule);background:transparent;padding:8px 17px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;position:relative;color:var(--body)}
.units label:has(input:checked){border-color:var(--teal);background:var(--teal);color:var(--paper)}
.units input{position:absolute;opacity:0;pointer-events:none}
/* Wider rows, because each field now carries a line telling you where to put
   the tape and two of those wrap at the old width. */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px}
.mgrid .f{display:flex;flex-direction:column;gap:2px}
.mgrid label{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.mgrid label .req{color:var(--gold-deep)}
/* Sentence case and untracked, so it reads as an instruction rather than as a
   second label competing with the first. */
.mhint{font-size:12.5px;line-height:1.45;color:var(--mute);margin:1px 0 4px;letter-spacing:0;text-transform:none;font-weight:400}

/* The unit rides with the number instead of being a placeholder that leaves
   when you type. The box is the input plus the unit, so the underline runs
   under both and it reads as one field. */
/* The number is right aligned so it sits against its unit. Left aligned, a
   two digit measurement and the "in" beside it ended up a field apart, which
   reads as two things rather than one measurement. */
.minput{display:flex;align-items:baseline;gap:7px;border-bottom:1px solid var(--rule);border-radius:var(--r-1) var(--r-1) 0 0;padding-right:11px;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
.minput input{border-bottom:0;border-radius:0;flex:1 1 auto;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.minput input:focus{box-shadow:none;background:transparent}
.minput:has(input:focus){border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold);background:rgba(140,113,52,.05)}
.munit{flex:none;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
/* Chrome and Safari draw spinner arrows on a number input. At this size they
   are a few pixels tall, they sit exactly where the unit now goes, and nobody
   has ever nudged a bust measurement by a quarter inch with them. */
.minput input::-webkit-outer-spin-button,.minput input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.minput input[type=number]{-moz-appearance:textfield;appearance:textfield}

.qtyrow{display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.qtyrow .lbl{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* The fill wipes in from the left as a background-size transition rather than
   an overlay, so it works on a button and on an anchor whose label is a bare
   text node, with nothing to stack above. */
.cta{
  display:block;width:100%;padding:17px 20px;border:0;border-radius:var(--r-2);
  color:var(--paper);font-family:var(--sans);font-weight:500;text-align:center;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;margin-top:22px;cursor:pointer;
  /* Indigo at rest, wiping to deep gold. Measured against paper text: indigo
     12.1:1, deep gold 5.8:1, both clear of AA. The gold this brand actually
     uses, --gold #8C7134, is 4.4:1 and does NOT clear it for a label this
     size, which is why the button is the deep one and not the bright one. */
  background-color:var(--teal);
  background-image:linear-gradient(var(--gold-deep),var(--gold-deep));
  background-repeat:no-repeat;background-position:left center;background-size:0 100%;
  transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .3s ease,box-shadow .35s ease;
}
.cta:hover{background-size:100% 100%;box-shadow:var(--lift-2)}
.cta[disabled]{background-color:var(--ivory-line);background-image:none;color:var(--mute);cursor:not-allowed}
.cta.ghost{background-color:transparent;color:var(--body);box-shadow:inset 0 0 0 1px var(--rule)}
/* The ghost button draws its own edge with an inset shadow, so its hover has
   to restate that edge or the lift replaces it and the outline disappears. */
.cta.ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--gold-deep),var(--lift-2)}

/* The phone buy bar. Nothing on a desktop, where .buy is already sticky. */
.buybar{display:none}
.fine{font-size:12.5px;letter-spacing:.07em;text-transform:none;color:var(--mute);text-align:center;margin-top:14px}

details{border-top:1px solid var(--hair);padding:0}
details:last-of-type{border-bottom:1px solid var(--hair)}
summary{cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink);padding:17px 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-deep);font-size:14px;letter-spacing:0}
details[open] summary::after{content:"\2013"}
details .body{padding:0 0 22px;color:var(--body);font-size:16px;white-space:pre-line;max-width:56ch}
table.chart{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:4px;font-variant-numeric:tabular-nums}
table.chart th,table.chart td{border-bottom:1px solid var(--hair);padding:10px 8px;text-align:center;font-weight:400}
table.chart thead th{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--body);border-bottom-color:var(--rule)}
table.chart tbody th{color:var(--ink)}
.details{margin-top:32px}
.related{padding:0 0 clamp(50px,7vw,86px)}

/* ------------------------------------------------------------------ forms */
.field{margin-bottom:22px}
.field label{display:block;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--body);margin-bottom:2px}
.field .opt,.co-block h2 .opt{font-family:var(--sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-left:9px;font-weight:400}

/* A format hint, beside the label rather than inside the field.
   The phone field carried placeholder="98765 43210" and a plausible ten digit
   number sitting in an empty field reads as a number somebody already entered,
   not as a hint. Sentence case and untracked on purpose, so it reads as an
   aside to the label rather than as a second label. */
.field label .hint{
  font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--mute);margin-left:9px;
}

/* The phone row: a country select beside the number.
   The select is allowed to shrink and truncate on a wide screen, because the
   dialling code is at the END of each label ("United Arab Emirates +971") and
   the code is the part that has to stay visible... which is exactly why it does
   NOT shrink below 9.5em. On a phone the two stack instead, so nothing is
   truncated on the screen where the field is hardest to use. */
/* One control, not two fields. With a gap between them the code and the number
   read as two separate things to fill in, which is exactly what the select was
   added to stop. They share a ground, a radius on the outer corners only, and a
   hairline between. */
.telrow{display:flex;gap:0;align-items:stretch}
/* A fixed width, not auto. A select left to size itself takes the width of its
   LONGEST option, so "+971 United Arab Emirates" set the whole control and left
   about sixty pixels for the number. Fixed and clipped instead, which is why
   the dialling code is at the front of every label. */
.telrow select{flex:0 0 auto;width:8.4em}
.telrow input{flex:1 1 auto;min-width:0}
.co-block .telrow select{border-radius:var(--r-1) 0 0 0;box-shadow:inset -1px 0 0 var(--ivory-line)}
.co-block .telrow input{border-radius:0 var(--r-1) 0 0}

/* An explicit placeholder colour, because the browser default is the input's
   own colour at about half alpha, which lands near 3.6:1 on this paper and
   fails AA. --faint is 5.42:1 and still a clear step below the value, which is
   --ink at 10.4:1. Every placeholder left on the site DESCRIBES what goes in
   the field; none of them is an example value any more. */
::placeholder{color:var(--faint);opacity:1}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{
  /* Still an underline, not a box. The radius is only ever seen on the tinted
     ground that arrives on focus, which was a hard cornered rectangle. The
     bottom stays square so the rule under the field is still a straight rule. */
  width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:var(--r-1) var(--r-1) 0 0;
  background:transparent;padding:11px 2px;font-family:var(--sans);font-weight:400;
  font-size:16.5px;color:var(--ink);transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
input[type=number]{font-variant-numeric:tabular-nums}
select{
  -webkit-appearance:none;appearance:none;padding-right:26px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238C7134'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:9px 6px;
}
textarea{background:rgba(30,35,29,.026);padding:13px 14px;min-height:96px;resize:vertical;line-height:1.65;border-radius:var(--r-2) var(--r-2) 0 0}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold);background:rgba(140,113,52,.05)}
/* 25px. A checkbox label is a tap target for the whole line, so it gets the
   height rather than the little square inside it. */
/* The consent box.
   It is the one control on this page carrying a commitment she may later have
   to point at, and it was a 13px native square on a maroon ground. Drawn rather
   than accent-coloured, because accent-color leaves the browser's own box and
   its own tick, and neither belongs to this palette. The native input is still
   the control: it is only moved off screen, so the label, the keyboard and a
   screen reader all behave exactly as they did. */
/* position:relative so the hidden input stays inside this label. Without it the
   nearest positioned ancestor is the panel, and the control ends up parked in
   its top left corner, which is where a browser would scroll to on an error. */
.check{position:relative;display:flex;gap:14px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:15.5px;color:var(--body);cursor:pointer;line-height:1.6}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{
  flex:none;width:24px;height:24px;margin-top:1px;border-radius:var(--r-1);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,box-shadow .2s ease;
}
.check .box:after{
  content:"";width:11px;height:6px;margin-top:-3px;
  border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .18s ease;
}
.check input:checked + .box{background:var(--olive);box-shadow:inset 0 0 0 1px var(--olive)}
.check input:checked + .box:after{transform:rotate(-45deg) scale(1);opacity:1}
.check input:focus-visible + .box{outline:2px solid var(--gold-deep);outline-offset:3px}
/* On the maroon ground the deep gold outline disappears, and the empty box has
   to read against a dark ground rather than a light one. */
.co-block.mto .check .box{background:rgba(251,249,245,.12);box-shadow:inset 0 0 0 1px var(--gold-lit)}
.co-block.mto .check input:checked + .box{background:var(--gold-lit);box-shadow:inset 0 0 0 1px var(--gold-lit)}
.co-block.mto .check .box:after{border-color:var(--forest)}
.co-block.mto .check input:focus-visible + .box{outline-color:var(--on-dark)}
.ferr{color:var(--red);font-size:13.5px;margin-top:6px}
.flash{margin:22px 0 0;padding:15px 18px;font-size:15px;border-left:2px solid;border-radius:var(--r-2);box-shadow:var(--lift-1)}
.flash.ok{background:var(--ivory);background-image:var(--weave);border-color:var(--gold);color:var(--gold-deep)}
.flash.bad{background:#FAEFEF;border-color:var(--red);color:var(--red)}

/* -------------------------------------------------------------------- bag */
.bagpage{padding:0 0 clamp(52px,7vw,86px);display:grid;grid-template-columns:1fr 330px;gap:clamp(30px,4.6vw,68px);align-items:start}
.bagpage .head{padding:clamp(30px,4vw,52px) 0 24px}
.lines{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.line{display:grid;grid-template-columns:112px 1fr auto;gap:24px;padding:26px 0;border-bottom:1px solid var(--hair)}
.line .ph{width:112px;aspect-ratio:3/4;background:var(--ivory);background-image:var(--weave);overflow:hidden;display:block;border-radius:var(--r-2)}
.line .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.line .ph:hover img{transform:scale(1.05)}
.line .mid{display:flex;flex-direction:column;gap:7px;min-width:0}
.line .n{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.15;letter-spacing:-.008em}
.line .v{font-size:13.5px;letter-spacing:.02em;color:var(--mute)}
.line .v.gold{color:var(--gold-deep)}
.line .right{text-align:right;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.line .amt{font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.03em}
/* 44px, which is the smallest thing a thumb hits reliably. These were 34 and
   they are pressed more than anything else on the bag page. */
.qty{display:flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-pill)}
.qty button{width:44px;height:44px;border:0;background:none;font:inherit;font-size:16px;line-height:1;cursor:pointer;color:var(--body)}
.qty button:hover:not(:disabled){color:var(--gold-deep)}
.qty button:disabled{color:var(--faint);cursor:not-allowed}
.qty .n{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;font-size:15px}
/* 55 by 16 before this. Same pseudo-element trick as the navigation: the
   underline is this element's own border, so growing the box with padding
   would drag the rule away from the word. */
.linkbtn{background:none;border:0;padding:0;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);cursor:pointer;border-bottom:1px solid var(--rule);padding-bottom:3px;position:relative}
.linkbtn::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.linkbtn:hover{color:var(--gold-deep);border-color:var(--gold)}
.mset{margin-top:4px;border-left:1px solid var(--gold);padding:7px 0 7px 14px;display:flex;flex-wrap:wrap;gap:5px 20px}
.mset .m{font-size:13.5px;color:var(--body);font-variant-numeric:tabular-nums}
.mset .m b{font-weight:500;color:var(--mute);text-transform:uppercase;font-size:11px;letter-spacing:.07em;margin-right:5px}
.mset .note{flex-basis:100%;font-family:var(--display);font-style:italic;font-weight:500;font-size:15.5px;color:var(--mute)}

/* The summary panel is the house talking about money, not a garment on show,
   so it takes a ground. One rule colours it on the bag, the checkout and the
   order page at once. */
.summary{background:var(--teal);background-image:var(--weave-lit);padding:26px 26px 28px;border-top:2px solid var(--gold-lit);color:var(--on-dark);border-radius:var(--r-3);box-shadow:var(--lift-1)}
.summary h2{color:var(--on-dark)}
.summary .sumrow{color:var(--on-dark-soft)}
.summary .sumrow.total{border-top-color:var(--teal-line);color:var(--on-dark)}
.summary .sumnote{color:var(--on-dark-soft)}
.summary .sumnote.gold{color:var(--gold-lit)}
.summary .sumnote a{color:var(--gold-lit);border-bottom:1px solid var(--teal-line)}
.summary .addr{color:var(--on-dark-soft)}
/* Gold, not charcoal: on indigo this is the one button that has to be found. */
.summary .cta{background-color:var(--gold-lit);color:var(--teal)}
.summary .cta:hover{background-color:#D9B23A}
/* Only the bag and the checkout pin their summary. The order page stacks two
   of them in one column, and two sticky siblings fight each other. */
.bagpage > .summary{position:sticky;top:104px}
.summary h2{font-family:var(--display);font-weight:650;font-size:25px;letter-spacing:-.008em;margin:0 0 18px}
.sumrow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:14.5px;color:var(--body);font-variant-numeric:tabular-nums}
.sumrow.total{border-top:1px solid var(--ivory-line);margin-top:10px;padding-top:16px;font-size:17.5px;font-weight:500;color:var(--ink)}
.sumnote{font-size:13.5px;color:var(--mute);margin:12px 0 0;line-height:1.6}
.sumnote.gold{color:var(--gold-deep)}
.bagempty{padding:clamp(60px,10vw,110px) 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.bagempty img{width:128px;height:128px;opacity:.9}
.bagempty p{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.6vw,28px);color:var(--mute);margin:0}

/* --------------------------------------------------------------- checkout */
.checkout{display:grid;grid-template-columns:1fr 350px;gap:clamp(30px,4.6vw,68px);align-items:start;padding-bottom:clamp(52px,7vw,86px)}
.co-main{display:flex;flex-direction:column;gap:clamp(30px,4vw,48px);counter-reset:co}
/* Numbered sections, each on a ground of its own.
   Shashank, on the live checkout: "the whole checkout form looks too bland".
   He is right, and the reason is visible the moment you look at the two columns
   side by side. The summary has a colour, a weave, a soft lift and a gold edge.
   The form had a hairline and a numeral, on the same cream as the page behind
   it. One column looked designed and the other looked like a wireframe.

   The fix is the page's own panel language rather than a new one. .measure on
   the product page and .co-block.mto right below here are both a ground, a
   2px edge on ONE side, a radius and a lift. That is not a box drawn around a
   block, which this stylesheet does not do; it is the "ground" the rule at the
   top of this file already allows. The made to order block stops being the
   only designed thing on the page and becomes the coloured member of a family.

   The numeral still hangs in the left padding, so the heading and every field
   below it share one left edge. */
.co-block{
  counter-increment:co;position:relative;
  background:var(--ivory);background-image:var(--weave);
  border-left:2px solid var(--gold);
  border-radius:var(--r-3);
  box-shadow:var(--lift-1);
  padding:24px 28px 26px 60px;
}
.co-block:before{content:counter(co,decimal-leading-zero);position:absolute;left:26px;top:29px;font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.08em;color:var(--gold-deep);font-variant-numeric:tabular-nums}

/* A field is now the lightest thing on the page, sitting on a panel that is
   slightly darker than the page. That reads as somewhere to type without a
   single border being drawn, and it solves the problem the ivory ground would
   otherwise have caused: --rule on --ivory is 1.16:1, so the underline that
   marks where a field IS would have all but disappeared. */
.co-block .field input,.co-block .field select,.co-block .field textarea,
.co-block > textarea{
  background:var(--paper);
  padding-inline:12px;
  border-bottom-color:var(--ivory-line);
  border-radius:var(--r-1) var(--r-1) 0 0;
}
.co-block .field input:focus,.co-block .field select:focus,.co-block .field textarea:focus,
.co-block > textarea:focus{background:rgba(140,113,52,.06)}
.co-block h2{font-family:var(--display);font-weight:650;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin:0 0 6px;line-height:1.1}
.co-help{color:var(--body);font-size:14.5px;margin:0 0 24px;max-width:58ch}
/* Sections with no help line put their first field straight under the
   heading, which reads as a collision. Give those the same air. */
.co-block h2 + .field,.co-block h2 + .row,.co-block h2 + textarea,.co-block h2 + .check{margin-top:24px}
.co-block.mto{background:var(--forest);background-image:var(--weave-lit);border-left-color:var(--gold-lit);color:var(--on-dark-soft)}
.co-block.mto h2{color:var(--on-dark)}
.co-block.mto .co-help{color:var(--on-dark-soft)}
.co-block.mto:before{color:var(--gold-lit)}
.co-block.mto .check span{color:var(--on-dark-soft)}
.co-block.mto:before{color:var(--gold-lit)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.row.c3{grid-template-columns:1.2fr 1.2fr .8fr}
.row.c3.pinfirst{grid-template-columns:.8fr 1.2fr 1.2fr}
.co-help.pinfill{margin-top:6px}
/* align-self, and it is the whole reason the summary was not sticking.
   .checkout is a grid with align-items:start, so this aside was only as tall as
   the card inside it. A sticky element can only travel inside its containing
   block, and its containing block had nowhere to go: the card reached the
   bottom of the aside immediately and scrolled away with the page, straight up
   under the header. Shashank saw it on the live checkout: "Your order" sitting
   half behind the header bar.
   The bag page and the product page do not have this, because there the sticky
   element IS the grid item and its containing block is the whole grid area. */
.co-side{align-self:stretch}
.co-side .summary{position:sticky;top:104px}
.co-lines{display:flex;flex-direction:column;gap:16px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--ivory-line)}
.co-line{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center}
.co-line .ph{position:relative;width:54px;aspect-ratio:3/4;background:var(--paper);overflow:hidden;border-radius:var(--r-1)}
.co-line .ph img{width:100%;height:100%;object-fit:cover;display:block}
.co-line .ph .q{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:999px;background:var(--teal);color:var(--paper);font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-variant-numeric:tabular-nums}
.co-line .n{font-size:15px;font-weight:500;line-height:1.3;color:var(--ink)}
.co-line .v{font-size:12.5px;letter-spacing:.02em;color:var(--mute)}
.co-line .v.gold{color:var(--gold-deep)}
.co-line .a{font-size:14px;font-variant-numeric:tabular-nums}
/* These lines live inside .summary, which is indigo now. Written after the
   .co-line rules above and scoped under .summary so they win on both counts:
   the piece names were rendering at --ink on indigo, and the quantity dot was
   a near black circle on a near black ground. */
.summary .co-lines{border-bottom-color:var(--teal-line)}
.summary .co-line .n{color:var(--on-dark)}
.summary .co-line .v{color:var(--on-dark-soft)}
.summary .co-line .v.gold{color:var(--gold-lit)}
.summary .co-line .a{color:var(--on-dark)}
.summary .co-line .ph .q{background:var(--gold-lit);color:var(--teal)}

/* ---------------------------------------------------------------- sandbox */
.sandbox{max-width:640px;margin:0 auto;padding:clamp(44px,7vw,84px) 0 clamp(56px,8vw,96px);text-align:center}
.sandbox h1{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.016em;margin:14px 0 18px}
.sandbox p{color:var(--body);margin:0 auto 26px;max-width:54ch}
.sb-order{display:flex;gap:clamp(24px,5vw,54px);justify-content:center;background:var(--ivory);background-image:var(--weave);border-top:2px solid var(--gold);padding:22px 26px;margin:0 0 30px;border-radius:var(--r-3)}
.sb-order div{display:flex;flex-direction:column;gap:6px}
.sb-order span{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sb-order b{font-family:var(--display);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.sb-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.sb-actions form{flex:1;min-width:210px}
.sb-actions .cta{margin-top:0}

/* ------------------------------------------------------------- order page */
.orderpage{padding:clamp(30px,4vw,54px) 0 clamp(52px,7vw,86px)}
.ordhead{margin-bottom:clamp(26px,3.4vw,42px);max-width:64ch}
.ordhead h1{font-family:var(--display);font-size:clamp(30px,4vw,52px);font-weight:600;margin:14px 0 12px;line-height:1.04;letter-spacing:-.018em}
.ordhead p{color:var(--body);margin:0;max-width:60ch}
.ordgrid{display:grid;grid-template-columns:1fr 330px;gap:clamp(30px,4.6vw,68px);align-items:start}
.ordmeta{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule);margin-bottom:26px}
.ordmeta div{display:flex;flex-direction:column;gap:5px;padding:15px 0;border-bottom:1px solid var(--hair)}
.ordmeta div:nth-child(odd){padding-right:22px}
.ordmeta div:nth-child(even){padding-left:22px;border-left:1px solid var(--hair)}
.ordmeta span{font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ordmeta b{font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
.ordmeta b.ok{color:var(--olive)}
.ordmeta b.bad{color:var(--red)}
/* Somewhere to ask, under the totals. Quiet: it is the last thing on the page
   and it is reassurance rather than an instruction. */
.ordhelp{margin-top:18px;padding:20px 22px;background:var(--ivory);background-image:var(--weave);border-left:2px solid var(--gold);border-radius:var(--r-3);box-shadow:var(--lift-1)}
.ordhelp h2{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.006em;margin:0 0 6px;color:var(--ink)}
.ordhelp p{font-size:14.5px;color:var(--body);margin:0 0 12px}
.ordhelp dl{margin:0 0 10px;display:flex;flex-direction:column;gap:2px}
.ordhelp dl div{display:flex;flex-direction:column;gap:0}
.ordhelp dt{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ordhelp dd{margin:0;font-size:15px}
/* 18px before. These two are the only way to reach her from this page. */
.ordhelp dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-deep);border-bottom:1px solid var(--rule)}
.ordhelp dd a:hover{border-color:var(--gold)}
.ordhelp dl:empty{display:none}

.ordh2{font-family:var(--display);font-weight:650;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;margin:32px 0 10px}
.track{display:flex;margin:0 0 26px;padding:24px 0 0;border-top:1px solid var(--rule);flex-wrap:wrap}
.track .step{flex:1;min-width:112px;display:flex;flex-direction:column;gap:10px;position:relative;opacity:.38;padding-bottom:20px}
.track .step.on{opacity:1}
.track .dot{width:7px;height:7px;background:var(--ivory-line);position:relative;z-index:1;transform:rotate(45deg);margin-left:1px}
.track .step.on .dot{background:var(--gold)}
.track .step:not(:last-child):after{content:"";position:absolute;left:9px;top:3px;right:0;height:1px;background:var(--ivory-line)}
.track .step.on:not(:last-child):after{background:var(--gold-pale)}
.track .lbl{font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--body)}
.addr{margin:0;font-size:15.5px;line-height:1.8;color:var(--body)}
/* The customer's parcel (23 September 2026): the same facts grid as the order
   details above it, one line saying where it stands, and the courier's page. */
.parcelbox{margin:0 0 8px}
.parcelbox .ordh2{margin-top:6px}
.parcelstate{margin:0 0 14px;font-size:16px;color:var(--ink);font-weight:500}
.parcelbox .ordmeta{margin-bottom:18px}
.parcelbox .ordmeta b{overflow-wrap:anywhere}
.parcelbox .ordmeta .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.parcelbox .when{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--mute)}
.parceltrack{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:44px;text-decoration:none}
/* Four stages on a phone: one row, the labels allowed to wrap, rather than
   Delivered dropping alone onto a second line. */
@media (max-width:560px){.track{flex-wrap:nowrap}.track .step{min-width:0}.track .lbl{font-size:10.5px;letter-spacing:.06em;padding-right:6px}}
.trackbox{max-width:470px;margin:0 auto;padding:6px 0 clamp(60px,9vw,100px)}

/* ----------------------------------------------------------- policy pages */
/* One measure, one rhythm, six pages. These are read rather than scanned, so
   the column is narrower than the catalogue's and the leading is longer. */
.policy{max-width:62ch;padding:4px 0 clamp(60px,9vw,100px)}
.policy section{margin-top:clamp(34px,4.4vw,52px)}
.policy section:first-child{margin-top:clamp(20px,2.6vw,30px)}
.policy h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,29px);line-height:1.18;letter-spacing:-.008em;color:var(--ink);margin:0 0 14px}
.policy p{color:var(--body);font-size:16.5px;line-height:1.7;margin:0 0 15px;max-width:60ch}
.polist{list-style:none;margin:0 0 15px;padding:0}
.polist li{position:relative;padding-left:22px;color:var(--body);font-size:16.5px;line-height:1.7;margin-bottom:9px}
/* The same gold diamond the made to order band uses for its promises. */
.polist li:before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.podl{margin:0 0 16px}
.podl > div{padding:13px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,15em) 1fr;gap:6px 24px;align-items:baseline}
.podl > div:last-child{border-bottom:1px solid var(--hair)}
.podl dt{font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.podl dd{margin:0;color:var(--body);font-size:16px;line-height:1.62}
/* A note is the thing on the page most likely to be the reason someone came. */
.ponote{background:var(--ivory);background-image:var(--weave);border-left:2px solid var(--gold);border-radius:var(--r-3);padding:15px 18px;font-size:15.5px}
.polink{color:var(--gold-deep);border-bottom:1px solid var(--rule);font-size:16.5px}
.polink:hover{border-color:var(--gold)}
/* 58 by 19. The phone rule further down already gives these a 44px reach; this
   is the desktop one, where 24px is the floor. */
.foolegal{display:flex;gap:18px}
.foolegal a{position:relative;display:inline-flex;align-items:center;min-height:26px}

/* ---------------------------------------------------------------- account */
/* The sign in, register and reset forms share the tracking form's column. One
   narrow measure for every page that is a form and nothing else, so they read
   as the same kind of page rather than four different ones. */
.authbox{max-width:470px;margin:0 auto;padding:6px 0 clamp(60px,9vw,100px)}
.authbox .check{margin:18px 0 4px}
.authalt{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--mute)}
@media (max-width:640px){.authalt{gap:22px}}
.authalt a{color:var(--gold-deep);border-bottom:1px solid var(--rule)}
.authalt a:hover{border-color:var(--gold)}

/* The account itself is the bag's two column shape, because it is the same
   kind of screen: a list of things on the left, who you are on the right. */
.acct{padding:0 0 clamp(52px,7vw,86px);display:grid;grid-template-columns:1fr 330px;gap:clamp(30px,4.6vw,68px);align-items:start}
.acctorders{display:flex;flex-direction:column}
.acctorder{display:grid;grid-template-columns:84px 1fr auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--hair);align-items:center}
.acctorder .ph{width:84px;aspect-ratio:3/4;background:var(--ivory);background-image:var(--weave);overflow:hidden;display:block;border-radius:var(--r-2)}
.acctorder .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.acctorder:hover .ph img{transform:scale(1.05)}
.acctorder .mid{display:flex;flex-direction:column;gap:6px;min-width:0}
.acctorder .n{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.16;letter-spacing:-.008em;color:var(--ink)}
.acctorder .v{font-size:13px;letter-spacing:.03em;color:var(--mute)}
.acctorder .v.gold{color:var(--gold-deep)}
.acctorder .right{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.acctorder .amt{font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.03em;color:var(--ink)}
.acctempty{padding:clamp(34px,5vw,60px) 0;max-width:46ch}
.acctempty p{margin:0 0 12px;font-family:var(--display);font-style:italic;font-size:clamp(19px,2.2vw,25px);color:var(--mute)}
.acctempty .co-help{font-family:var(--sans);font-style:normal;font-size:14.5px}
.acctempty .cta{max-width:260px;margin-top:20px}
.acctside .summary .sumrow span:last-child{text-align:right;word-break:break-word}

/* The header mark. The word SIGN IN used to sit here and it read as one more
   category, because that is what a word in a row of words reads as. It is drawn
   now, beside the bag and built the same way: the mark carries its own state
   inside itself rather than on a label next to it.

   The divider moved here from the bag, so there is still exactly one hairline
   between the navigation and the pair of controls rather than two. */
.acctmark{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;color:var(--body);padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--hair);line-height:0}
.acctmark + .bag{border-left:0;padding-left:0}
.accticon{
  position:relative;display:block;width:29px;height:32.9px;
  /* A 46px hit area around a 29px drawing. The mark is the right size
     for the header and the wrong size for a thumb. */
  /* The mark itself does not move. It used to nod on the bag's rhythm, and
     Shashank's call was that the eyes should carry the character instead: a
     head bobbing next to a bag hopping is two of the same idea in one corner.
     Everything alive here now happens inside the face. */
}
.accticon svg{width:100%;height:100%;display:block;overflow:visible}
/* fill-box, so each eye scales about its own centre rather than about the
   origin of the whole drawing, which slides them off the face instead of
   closing them. */
/* A head that TURNS, not a head that slides. Shashank's note, and the
   distinction is the whole thing: the first version translated the entire head
   sideways, which is a face on a rail.

   A circle cannot show rotation. Rotate a ring and nothing happens, so every
   bit of the turn has to be carried by the two dots inside it, and what sells
   it is foreshortening:

   - The FAR eye sweeps across the face and so travels further on screen, 2.2
     units. The NEAR eye is heading toward the silhouette edge, where a sphere
     is turning away from you, so it travels less, 1.4.
   - The gap between them therefore closes from 5.2 to 4.4 rather than staying
     fixed. A pair of dots that keeps its spacing is a pair of dots being
     dragged; a pair that narrows is a face rotating.
   - Both squash horizontally to 88 per cent at full turn, which is what a
     circle on the surface of a sphere does as it rotates away from the viewer.

   The head and the shoulders do not move at all. Nothing else needs to.

   The blink still lands after the turn has settled, since eyes that move and
   blink at the same instant read as a twitch. Two thirds of the 5.6s cycle is
   rest. */
.accticon .eye{transform-box:fill-box;transform-origin:center}
.accticon .eye-l{animation:accteyeleft 5.6s ease-in-out infinite}
.accticon .eye-r{animation:accteyeright 5.6s ease-in-out infinite}

@keyframes accteyeleft{
  0%,38%   {transform:translateX(0) scale(1,1)}
  43%,55%  {transform:translateX(-1.4px) scale(.88,1)}
  60%,72%  {transform:translateX(2.2px) scale(.88,1)}
  77%,89%  {transform:translateX(0) scale(1,1)}
  90.5%    {transform:translateX(0) scale(1,.08)}
  92%,100% {transform:translateX(0) scale(1,1)}
}
@keyframes accteyeright{
  0%,38%   {transform:translateX(0) scale(1,1)}
  43%,55%  {transform:translateX(-2.2px) scale(.88,1)}
  60%,72%  {transform:translateX(1.4px) scale(.88,1)}
  77%,89%  {transform:translateX(0) scale(1,1)}
  90.5%    {transform:translateX(0) scale(1,.08)}
  92%,100% {transform:translateX(0) scale(1,1)}
}
/* Her initial, where the bag keeps its count. */
.acctnum{
  /* 34%, not the ring's geometric 33.5%. line-height:1 boxes the em, and a
     didone's capital sits high in it, so centring the BOX leaves the letter
     riding above the ring's middle. This centres what you can see. */
  position:absolute;left:0;right:0;top:34%;transform:translateY(-50%);
  text-align:center;font-style:normal;font-family:var(--display);font-weight:600;
  /* 11px against a ring whose interior is about 11.6px across. The first
     attempt put 12px inside a 9.3px ring and the bowl of the capital sat on the
     stroke; shrinking the letter to fit made it unreadable instead. The ring
     had to grow. */
  font-size:11px;line-height:1;letter-spacing:0;color:var(--gold-deep);
}
.acctmark:hover{color:var(--gold-deep)}
.acctmark:hover .acctnum,.acctmark.on .acctnum{color:#6F551F}
.acctmark.on{color:var(--gold-deep)}

/* ------------------------------------------------------------- pagination */
.pagination{display:flex;gap:4px;justify-content:center;padding:0 0 clamp(50px,7vw,80px);flex-wrap:wrap;font-variant-numeric:tabular-nums}
/* 41px before, three short. The underline is this element's own border, so
   the box grows and the rule stays on it. */
.pagination a,.pagination span{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;font-size:13.5px;letter-spacing:.04em;color:var(--body);border-bottom:1px solid transparent}
.pagination a:hover{color:var(--gold-deep);border-bottom-color:var(--gold)}
.pagination span[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.pagination .off{color:var(--faint)}

/* ------------------------------------------------------------------ footer */
footer.site{background:var(--charcoal);background-image:var(--weave);color:#A7B2A3;margin-top:clamp(20px,4vw,48px)}
footer.site .footin{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,50px);padding-block:clamp(40px,5.6vw,72px) clamp(30px,4vw,46px)}
footer .fmark img{width:min(250px,100%);height:auto;display:block;margin-bottom:16px}
footer .fline{font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;color:#C2CBBE;margin:0;max-width:30ch;line-height:1.55}
footer h2{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);margin:0 0 16px;font-weight:500}
footer .fcol a{display:flex;align-items:center;min-height:44px;font-size:14.5px;letter-spacing:.01em;padding:2px 0;color:#B1BBAD;transition:color .25s ease}
footer .fcol a:hover{color:#EEF2EA}
footer .fcol p{font-size:14.5px;margin:0;color:#97A393;line-height:1.7;max-width:30ch}
footer .footbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:20px 26px;border-top:1px solid rgba(238,242,234,.12);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#97A393}
/* The one link in the base row that isn't hers: quiet by default, same
   colour as the surrounding credit line, warming to the footer's gold on
   hover rather than jumping to full ivory the way her own nav links do.
   Also picks up the phone tap-target treatment below, same as .foolegal a. */
footer .footbase .credit{color:inherit;transition:color .25s ease}
footer .footbase .credit:hover{color:var(--gold-pale)}

/* ------------------------------------------------------------- reveal */
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}

/* --------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid.rel{grid-template-columns:repeat(3,1fr)}
  .gallery,.bagpage > .summary,.co-side .summary{position:static}
}
@media (max-width:980px){
  .product{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr;gap:26px}
  .fimg{aspect-ratio:3/4;max-height:66vh}
  .bandin{grid-template-columns:1fr}
  .bandimg{order:-1}
  .bandimg img{width:min(240px,55%)}
  /* Two columns of term and description is one column on a phone, and the
     term keeps its own line rather than being squeezed to five characters. */
  .podl > div{grid-template-columns:1fr}
  .bagpage,.checkout,.ordgrid,.acct{grid-template-columns:1fr}
  .acctorder{grid-template-columns:64px 1fr;gap:16px}
  .acctorder .ph{width:64px}
  .acctorder .right{grid-column:2;text-align:left;align-items:flex-start}
  footer.site .footin{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .heromark{width:82vw;right:-16%;top:auto;bottom:-6%;transform:none;opacity:.55}
  /* Beside the words is a desktop idea. On a phone the photograph takes the
     lower half of the hero and fades upward into the indigo the text sits on,
     rather than sliding underneath the text and putting a headline across
     somebody's chest, which is what the first attempt did. */
  .hero{min-height:auto}
  /* Height sets the width here too, for the same reason. The panel stands at
     the bottom right and dissolves down and to the left into the indigo,
     instead of lying across the band as a letterbox that could only ever hold
     a head and a neckline. */
  .heroshot{
    width:auto;height:78%;max-width:92%;
    left:auto;right:0;top:auto;bottom:0;object-position:50% 100%;
    /* The fade runs top left to bottom right, not top to bottom. The old one
       had it backwards: solid where the words are and dissolved at the bottom,
       so the call to action sat on a photograph. The words now sit on clean
       indigo and the figure stays whole. */
    -webkit-mask-image:linear-gradient(140deg,transparent 0,rgba(0,0,0,.35) 26%,rgba(0,0,0,.90) 50%,#000 62%);
            mask-image:linear-gradient(140deg,transparent 0,rgba(0,0,0,.35) 26%,rgba(0,0,0,.90) 50%,#000 62%);
  }
  /* ONE scrim. There were two of these, and the second won: a 170deg wash that
     still had 30% indigo over the bottom corner, which is the whole reason the
     photograph looked grey on a phone and sharp on a laptop. It covers the
     words and then stops, before the photograph starts. */
  .hero:before{background:linear-gradient(180deg,rgba(23,58,62,.96) 0%,rgba(23,58,62,.82) 34%,rgba(23,58,62,0) 54%)}
  /* Room under the words for the photograph to be a photograph. */
  .heroin{padding-bottom:clamp(285px,80vw,450px)}
  .grid{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  /* Centred copy is for a line or two. A collection description runs to eight
     lines at this width, and a ragged left edge on every line makes each one
     a search. The FAQ and policy headers already read from the left. */
  .head.mid{align-items:flex-start;text-align:left}
  .cta.onband{width:100%;justify-content:center}
  .grid .card:nth-child(3n+2){margin-top:0}
  /* No stagger on a phone, 23 September 2026. In two columns the offset put
     every pair of names on two baselines, which read as misalignment rather
     than rhythm (audit item 11, left open on 16 September). */
  .grid .card:nth-child(2n){margin-top:0}
  /* Except on a related row, which the desktop rule above already exempts.
     Somebody decided the stagger was wrong beside a product and the phone rule
     did not know it, so the offset was off at 1440 and on at 390. */
  .grid.rel .card:nth-child(2n){margin-top:0}
  .grid.rel{grid-template-columns:repeat(2,1fr)}
  .row,.row.c3,.row.c3.pinfirst{grid-template-columns:1fr}
  .ordmeta{grid-template-columns:1fr}
  .ordmeta div:nth-child(even){padding-left:0;border-left:0}
  .ordmeta div:nth-child(odd){padding-right:0}
  .sb-order{flex-direction:column;gap:16px}
  /* Four, not five: a piece usually has two or three photographs, and five
     columns made them 63px thumbnails sitting beside three empty tracks. */
  /* The thumbnail strip goes on a phone: with it, the photograph and its
     thumbnails filled the whole first screen and the piece's name and price
     started below it (audit Tier 4). Swipe the photograph instead; the dots
     say where you are. 4:5 rather than 3:4 for the same reason. */
  .gallery .thumbs{display:none}
  .gallery .main{aspect-ratio:4/5}
  .gallery .dots{display:flex;gap:7px;position:absolute;left:0;right:0;bottom:14px;justify-content:center;z-index:2;pointer-events:none}
  .gallery .dots span{width:7px;height:7px;border-radius:50%;background:rgba(30,35,29,.28);transition:background .25s ease,transform .25s ease}
  .gallery .dots span.on{background:var(--teal);transform:scale(1.25)}
  /* The garment is the reason for the page, so on a phone it gets the whole
     width. The negative margin matches .wrap's own padding exactly. */
  /* It bleeds to both screen edges here, and a radius on an edge that is
     not there reads as a mistake. Square on a phone, curved on a desk. */
  .gallery .main{margin-inline:calc(-1 * clamp(18px,4vw,34px));border-radius:0;box-shadow:none}
  /* Seven measurements stacked one per row is a long scroll for seven short
     numbers. */
  /* One column on a phone. Two columns put each hint on three ragged lines
     and left about 150px for a number, and seven fields is not a long scroll. */
  .mgrid{grid-template-columns:1fr;gap:16px}
  .bar{flex-wrap:wrap;gap:6px;padding-block:10px}
  .brand img{width:min(196px,54vw)}
  .navin{width:100%;justify-content:space-between;gap:12px;border-top:1px solid var(--hair)}
  nav.cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-ms-overflow-style:none;flex:1}
  nav.cats::-webkit-scrollbar{display:none}
  .bag{padding-left:12px}
  .line{grid-template-columns:84px 1fr;gap:16px}
  .line .ph{width:84px}
  .line .right{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}
  /* The panel keeps its ground and its padding on a phone; it is the 52px
     numeral gutter that goes, because on 390px that is an eighth of the screen
     spent on two digits. The numeral moves inline above the heading. */
  .co-block{padding:20px 18px 22px}
  .co-block:before{position:static;display:block;margin-bottom:8px}
  .co-block .field input,.co-block .field select,.co-block .field textarea,
  .co-block > textarea{padding-inline:11px}
  /* Two columns, not one. Stacked, the footer was two full phone screens of
     single links (audit Tier 4). The mark and the label's note run the full
     width; the collection and orders sit side by side. Links keep their 44px. */
  footer.site .footin{grid-template-columns:1fr 1fr;gap:22px 18px;padding-block:32px 22px}
  footer.site .fmark,footer.site .fcol:last-child{grid-column:1 / -1}
  footer .fmark img{width:190px;margin-bottom:10px}
  footer .fline{font-size:15.5px}
  footer h2{margin-bottom:6px}
  footer.site .fcol:last-child{display:flex;flex-wrap:wrap;column-gap:24px;align-items:center}
  footer.site .fcol:last-child h2{flex-basis:100%}
  footer.site .fcol:last-child p{flex-basis:100%;margin-top:6px}

  /* THE BUY BAR.
     Off screen by default and slid up when the real Add to bag button is not
     in view, which on this page includes the top of it: the photograph runs
     edge to edge and the button is well below the fold.

     Transform rather than display, so it moves rather than appears, and so
     that a reduced motion preference flattens the duration without hiding it.
     pointer-events go with it: a bar parked below the fold must not swallow a
     tap meant for the footer. */
  .buybar{
    display:flex;align-items:center;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--paper);border-top:1px solid var(--rule);
    box-shadow:0 -6px 22px rgba(28,44,30,.10);
    transform:translateY(105%);pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.7,.2,1);
  }
  .buybar.on{transform:translateY(0);pointer-events:auto}
  .bb-what{display:flex;flex-direction:column;gap:2px;min-width:0}
  .bb-what b{font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
  .bb-what span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar .cta{width:auto;flex:1;margin-top:0;padding:16px 18px;min-height:52px}

  /* Room for it, so the last footer row is never sat under the bar. Only on a
     page that has one. */
  body:has(.buybar){padding-bottom:86px}

  .szhead{margin-top:18px}
  .szchart{padding:12px 13px}

  /* 42px before. Checkout is the one screen where somebody types seven things
     in a row on a phone, and it is the last screen before the money. */
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],select,textarea{padding:14px 2px;min-height:48px}

  /* Stacked, so "+971 United Arab Emirates" is never truncated on the screen
     where the field is hardest to use. The seam between them turns with them. */
  .telrow{flex-direction:column;align-items:stretch}
  .telrow select{width:100%}
  .co-block .telrow select{border-radius:var(--r-1) var(--r-1) 0 0;box-shadow:inset 0 -1px 0 var(--ivory-line)}
  .co-block .telrow input{border-radius:0}
}
/* ---------------------------------------------------------- Navratri 2026
   App/Support/Navratri.php decides what is said and when; these only draw it.
   All of it is absent after Dussehra because the prop is null, so nothing
   here needs taking out by hand.

   The strip is forest, the band the house speaks on, with ivory text at
   10.4:1 and the link in gold-lit at 4.9:1. Not sticky: said once, then it
   scrolls away with the page. 13.5px, sentence case, untracked, because it is
   a sentence a customer reads, not a label. */
.navstrip{background:var(--forest);background-image:var(--weave-lit);color:var(--on-dark)}
.navstrip-in{display:block;padding-block:9px;font-size:13.5px;line-height:1.5;text-align:center;text-wrap:balance}
/* 44px to tap without making the strip 44px tall: the link is that tall and
   hands the extra back with a negative margin. */
.navstrip a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;margin-left:10px;padding-inline:4px;vertical-align:middle;color:var(--gold-lit);font-weight:500;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(201,162,39,.55);text-underline-offset:4px}
.navstrip a:hover{text-decoration-color:var(--gold-lit)}

/* The count, set into the hero like a ticket stub: a gold ground, teal text
   at 5.1:1, the one filled chip on the band. */
.herocount{display:inline-flex;align-items:center;margin-top:14px;padding:6px 13px;border-radius:var(--r-pill);background:var(--gold-lit);color:var(--teal);font-size:13px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* The order-by line under the price: a hairline of gold at its left, like the
   made to order note, not a box. */
.navline{margin:-8px 0 18px;padding:2px 0 2px 12px;border-left:2px solid var(--gold);color:var(--ink);font-size:14.5px;line-height:1.5;max-width:46ch}
.mto-box .mto-nav{display:block;margin-top:10px;color:var(--on-dark)}
.bb-what .bb-ask{color:var(--red)}

/* A table in a policy page: dates by region. Rules, not boxes; it scrolls
   inside itself on a phone rather than pushing the page sideways. */
.potable{overflow-x:auto;margin:6px 0 16px;-webkit-overflow-scrolling:touch}
.potable table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;font-variant-numeric:tabular-nums}
.potable th,.potable td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.potable thead th{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.potable tbody th{font-weight:500;color:var(--ink);padding-right:18px;min-width:170px}
.potable td{color:var(--ink);white-space:nowrap}
.potable td.closed{color:var(--faint)}
.policy section[id]{scroll-margin-top:110px}

/* ------------------------------------------------ delivery date, 30 Sep 2026
   Under Add to bag on the product page: a PIN in, an arrival window out.
   A hairline above it, like the accordions below, not a box. The field is an
   underline, as every field on this site is. */
.delcheck{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair)}
.delcheck .lbl{display:block;margin-bottom:8px}
.pinrow{display:flex;align-items:flex-end;gap:14px}
.pinrow input{flex:0 1 190px;min-width:0;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:10px 0 8px;font:inherit;font-size:16px;letter-spacing:.06em;color:var(--ink);min-height:44px;font-variant-numeric:tabular-nums;border-radius:0}
.pinrow input:focus{outline:none;border-bottom-color:var(--gold-deep)}
.pinrow input::placeholder{color:var(--faint);letter-spacing:0}
.pinbtn{background:none;border:0;padding:0 2px;min-height:44px;font:inherit;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold-pale)}
.pinbtn:hover{text-decoration-color:var(--gold-deep)}
.pinbtn[disabled]{color:var(--mute);cursor:default}
.delout{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.delout p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--body);max-width:40ch}
.delout p b{display:block;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.delout .pinbtn{flex:none}
.codel b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .zoomer:hover img{transform:none}
  .js .rise{opacity:1;transform:none}
}

/* The order's document as a PDF (v0.9.123): on the order page under the
   order details, and under each order in the account. Links, not buttons:
   they download a file and go nowhere. 44px to the thumb. */
.docdl,.acctdoc{display:inline-flex;align-items:center;min-height:44px;gap:8px;font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.docdl{margin:-14px 0 22px}
.docdl:hover,.acctdoc:hover{color:var(--forest)}
.acctorderwrap{border-bottom:1px solid var(--hair)}
.acctorderwrap .acctorder{border-bottom:0;padding-bottom:10px}
.acctdoc{margin:0 0 10px 106px}
@media (max-width:600px){.acctdoc{margin-left:0}}