/* CARAT · Fleurs d'Exception — the one stylesheet for the site.
   Rules paid for on the mock-ups (05.10.2026):
     · Bodoni in the wordmark only; headings are Marcellus, or they do not read;
     · no text-shadow anywhere — it prints as a black slab in PDF;
     · no full-width black bands; the footer is the only dark surface. */

@font-face { font-family:"Bod";  src:url("../fonts/BodoniModa.ttf");        font-display:swap; }
@font-face { font-family:"Head"; src:url("../fonts/Marcellus-Regular.ttf"); font-display:swap; }
@font-face { font-family:"Pin";  src:url("../fonts/PinyonScript-Regular.ttf"); font-display:swap; }
@font-face { font-family:"Man";  src:url("../fonts/Manrope.ttf");           font-display:swap; }

:root{
  --ink:#1A1A18; --ivory:#F7F4EF; --sand:#EFEAE1; --gold:#9C7F3F;
  --line:#BDB4A6; --body:#3E3A36; --mute:#8A8276;
  --pad:110px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--body);font-family:"Man",system-ui,sans-serif;
     -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.75}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

.wm{font-family:"Bod",serif;letter-spacing:.34em;text-indent:.34em}
.script{font-family:"Pin",cursive}
.rule{width:64px;height:1px;background:var(--line);margin:22px auto}
.rule.l{margin-left:0}
.center{text-align:center}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;
     padding:26px var(--pad);border-bottom:1px solid #E4DFD6;background:var(--ivory);
     position:sticky;top:0;z-index:20}
.nav .wm{font-size:21px}
.nav ul{display:flex;gap:34px;list-style:none}
.nav li{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.nav a:hover{color:var(--ink)}

/* hero */
/* hero.jpg is 968x1200 — taller than it is wide. A full-bleed band can never show all of
   it (at 1440 wide the whole file would be 1785 px tall), so the band is as tall as a
   screen allows and the frame is placed to keep the boxes whole: the three CARAT fronts
   sit at 63-76% of the file, and 55% is the setting that brings the band down to them
   while the two front domes stay complete. Taller is strictly better here — it widens
   the window at both ends — so the band takes as much of the screen as it can.
   🔴 Lowering 55% further reaches the bottoms of the boxes but starts cutting the tops
   off the two front domes at 1440: that was measured, not guessed. A hero that shows the
   whole photograph needs a landscape file, not a setting. */
.hero{position:relative;height:min(92vh,900px);overflow:hidden}
.hero img{object-position:50% 55%}
/* 🔴 No filter on the photograph (17.10.2026). It used to carry brightness(.52)
   saturate(.88) on top of this gradient — the picture was dimmed twice and the flowers
   went grey. Darkening belongs to .shade alone, which lies under the wordmark and the
   line, and only as far as white type needs. Measured off the render at 1440 and 1920:
   the small caps sit at 11-13:1 against white and the big wordmark, the palest spot on
   the band, at 5.9:1 — well past the 3:1 that type that size asks for. Weaken the radial
   and the wordmark is the first thing to go. */
.hero .shade{position:absolute;inset:0;background:
  radial-gradient(64% 58% at 50% 48%,rgba(10,10,9,.62) 0%,rgba(10,10,9,.22) 70%,rgba(10,10,9,0) 100%),
  linear-gradient(180deg,rgba(10,10,9,.42) 0%,rgba(10,10,9,.16) 38%,rgba(10,10,9,.58) 100%)}
.hero .mid{position:absolute;inset:0;display:flex;flex-direction:column;
           align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 24px}
.hero .wm{font-size:clamp(38px,8vw,72px);color:#fff}
.hero .sub{font-size:11px;letter-spacing:.44em;text-transform:uppercase;
           color:rgba(255,255,255,.86);margin-top:16px}
.hero .line{font-family:"Pin",cursive;font-size:clamp(28px,6vw,44px);color:#fff;margin-top:40px}
.hero .cta{margin-top:36px;border:1px solid rgba(255,255,255,.85);background:rgba(10,10,9,.28);
           padding:13px 34px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff}
.hero .cta:hover{background:rgba(10,10,9,.5)}
.cta{display:inline-block}
/* button on a light card — its own rule; the hero button is built for a photograph */
.cta.dark{align-self:flex-start;margin-top:30px;border:1px solid var(--ink);background:none;
  padding:12px 28px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.cta.dark:hover{background:var(--ink);color:var(--ivory)}
.ul{border-bottom:1px solid var(--line)}
.ul:hover{border-color:var(--ink);color:var(--ink)}

section{padding:96px var(--pad)}
h1,h2{font-family:"Head",serif;font-weight:400;letter-spacing:.07em;color:var(--ink);text-transform:uppercase}
h2{font-size:clamp(26px,4vw,40px)}
h1{font-size:clamp(28px,5vw,44px)}
.lead{font-size:17px;line-height:1.95;max-width:620px;margin:26px auto 0;color:var(--body)}
.lead.l{margin-left:0}

/* manifesto */
.idea{background:var(--sand)}
.carats{display:flex;justify-content:center;gap:92px;margin-top:60px;flex-wrap:wrap}
.carats .n{font-family:"Head",serif;font-size:66px;color:var(--gold);line-height:1}
.carats .t{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-top:14px}
.carats .p{font-family:"Head",serif;font-size:20px;color:var(--ink);margin-top:18px;letter-spacing:.06em}

/* stone and room cards */
/* Framing of the photographs (17.10.2026, second pass — this replaces the cropped frames
   of the morning). The photograph is shown whole: nothing is cut off any edge, the box
   and its CARAT mark are always complete, and the picture is what sets the height of the
   card. The text column is the shorter of the two and centres itself against it.
   🔴 Do not reach for object-fit:cover here again. Every file is portrait, the cell is
   half the viewport, and cover can only get there by cutting — which is precisely the
   complaint. If a card has to be made shorter, narrow the photograph column; do not crop.
   The photograph column is the wider one (1.08fr against 1fr) because these pictures are
   what sells the boxes. */
.stone{display:grid;grid-template-columns:1.08fr 1fr;min-height:520px}
/* flex + center: should the text column ever come out taller than the picture, the
   picture sits in the middle of the cell rather than clinging to the top.
   background:inherit, not a colour of its own — the cell has to disappear into the card
   it is in (ivory on a plain card, #F2EEE7 on .alt), because a picture narrower than its
   track leaves that background showing at its sides and a mismatch would read as a bar. */
.stone .ph{position:relative;display:flex;align-items:center;justify-content:center;
  background:inherit;overflow:hidden}
/* 🔴 The blanket img{} rule is height:100%;object-fit:cover — both are restated here, or
   the picture is stretched to the cell and cropped again.
   max-height is the one limit on how tall a card may grow. Sapphire is 766x1200, the
   narrowest file of the set, and across a 740 px track it would otherwise run 1,160 px
   and leave its text stranded in the middle of an empty column. At the cap the picture
   keeps every pixel — object-fit:contain sets it 638 wide inside the track, with ~50 px
   of card colour at each side. Lower this and the other five start getting matted too. */
.stone .ph img{width:100%;height:auto;max-height:1000px;object-fit:contain}
.stone .ph .tag{position:absolute;left:24px;bottom:22px;padding:7px 14px;
  background:rgba(16,15,13,.55);color:#F3EFE8;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;white-space:nowrap}
/* On the white Diamond box the lower-left tag sits on the word CARAT — move it up. */
.stone .ph.tr .tag{left:auto;right:24px;top:22px;bottom:auto}
.stone .tx{display:flex;flex-direction:column;justify-content:center;padding:56px 72px}
.stone .nm{font-family:"Head",serif;font-size:clamp(28px,4vw,42px);letter-spacing:.1em;
           color:var(--ink);text-transform:uppercase}
.stone .la{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.stone p{font-size:16px;line-height:1.9;margin-top:22px;max-width:420px;color:var(--body)}
.stone .sz{margin-top:30px;font-size:13px;letter-spacing:.1em;color:#6B645B;line-height:2.3}
.stone .sz b{font-family:"Head",serif;font-weight:400;font-size:15px;color:var(--ink);letter-spacing:.1em}
.stone .note{margin-top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#A89F90}
/* 🔴 .rev only reorders the two cells; it does not reorder the track widths. Without the
   mirrored template the photograph lands in the narrow track on every second card and
   the text gets the wide one — the opposite of what is wanted. */
.stone.rev{grid-template-columns:1fr 1.08fr}
.stone.rev .ph{order:2}
.alt{background:#F2EEE7}

/* how to order */
.steps{display:flex;gap:70px;margin-top:56px;flex-wrap:wrap}
.steps .s{flex:1;min-width:230px}
.steps .i{font-family:"Head",serif;font-size:15px;letter-spacing:.24em;color:var(--gold)}
.steps h3{font-family:"Head",serif;font-weight:400;font-size:21px;letter-spacing:.1em;
          color:var(--ink);margin:16px 0 14px}
.steps p{font-size:15px;line-height:1.9}

/* form */
.form{max-width:640px;margin:0 auto}
.field{margin-top:26px;text-align:left}
label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
      color:var(--mute);margin-bottom:9px}
input,select,textarea{width:100%;padding:14px 16px;border:1px solid #DCD5CA;background:#fff;
      font-family:"Man";font-size:16px;color:var(--ink);border-radius:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:120px;resize:vertical}
.row{display:flex;gap:20px;flex-wrap:wrap}
.row .field{flex:1;min-width:220px}
.row.three .field{min-width:170px}
.btn{margin-top:34px;width:100%;padding:16px;border:none;background:var(--ink);color:#F3EFE8;
     font-family:"Man";font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer}
.btn:hover{background:#000}
.hint{margin-top:18px;font-size:13px;color:var(--mute);line-height:1.8}

/* text pages */
.doc{max-width:760px;margin:0 auto;text-align:left}
.doc h2{margin-top:52px;font-size:20px;letter-spacing:.1em}
.doc h2:first-of-type{margin-top:34px}
.doc p,.doc li{font-size:16px;line-height:1.95;margin-top:14px}
.doc ul{margin-left:22px}
.doc .upd{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

footer{background:#241F1A;color:#C9C3B8;padding:84px var(--pad) 64px;text-align:center}
footer .wm{font-size:30px;color:#fff}
footer .d{font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:#8E8775;margin-top:14px}
footer .script{font-size:30px;color:#C6A664;margin:42px 0 36px}
footer .meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E8775;line-height:2.4}
footer .meta a:hover{color:#fff}
footer .fine{margin-top:40px;padding-top:28px;border-top:1px solid #3A332B;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#6F6859}
footer .fine a:hover{color:#C6A664}

/* ——— phone: half the traffic arrives from Instagram ——— */
@media (max-width:860px){
  :root{--pad:24px}
  body{font-size:16px}
  .nav{flex-direction:column;gap:14px;padding:18px 24px;position:static}
  .nav ul{gap:18px;flex-wrap:wrap;justify-content:center}
  .nav li{font-size:10px;letter-spacing:.16em}
  section{padding:64px var(--pad)}
  /* 🔴 .stone.rev must be restated. The desktop rule that mirrors the track widths for a
     reversed card is a two-class selector and outweighs a bare .stone here, so without
     this line every second card keeps two columns on a phone and its photograph is
     squeezed into a 188 px strip. */
  .stone,.stone.rev{grid-template-columns:1fr;min-height:0}
  .stone.rev .ph{order:0}            /* on a phone the photograph is always on top */
  /* Full width, full frame. The fixed 62vw band that used to be here cut the box off
     every picture — the photograph is allowed its own height now. */
  .stone .ph{min-height:0;height:auto;max-height:none}
  .stone .tx{padding:40px 24px 52px}
  .carats{gap:48px}
  .carats .n{font-size:54px}
  .lead{font-size:16px}
  .steps{gap:36px}
  footer{padding:56px 24px 48px}
}

/* ——— the order form on order.html (16.10.2026) ——— */
/* Numbered sub-headings, in the same language as "how to order" on the home page. */
.sec{margin-top:52px;font-family:"Head",serif;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);text-align:left;
  border-bottom:1px solid #E4DFD6;padding-bottom:12px}
.sec .i{color:var(--gold);margin-right:14px}

/* Choosing the pieces (17.10.2026). The page used to take one stone per order — radios
   and a single counter below them. It is a basket now: ten cards, each with its own
   stepper, and anything above zero is in the order.
   🔴 One column, not two. A half-row is 313 px and a card has to hold the thumbnail, the
   name, the carats, the price and the stepper; the text column is what gives, and it has
   no room to give (see the name width below). */
.pick{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px}
.pick .gl{grid-column:1/-1;margin-top:14px;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mute);text-align:left}
.pick .gl:first-child{margin-top:0}
/* 🔴 .m is a <label> and the blanket label{} rule sets it in caps with .26em tracking.
   Case and tracking are therefore restated inside every caption — without that, a
   paragraph of explanation prints as four lines of capitals. */
/* Three columns: the square photograph, the two lines of text, the price and stepper
   right-aligned against the edge of the card.
   🔴 At 640 px the text column comes to 382 px and the longest name — PINK DIAMOND N° III
   — measures 200 px, so it holds one line with room to spare. Going back to two cards per
   row, or widening the stepper past 138 px, breaks that name in two and the row grows by
   30 px. On a phone the stepper drops to its own row for the same reason. */
.opt{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:14px;
  align-items:center;position:relative;margin-bottom:0;padding:18px;border:1px solid #DCD5CA;
  background:#fff;border-radius:2px;text-align:left;
  transition:border-color .15s,background .15s,box-shadow .15s}
.opt:hover{border-color:var(--line)}
.opt:focus-within{border-color:var(--gold)}
/* 🔴 the blanket img{} rule is width:100%;height:100% — restate both, or the thumbnail
   stretches to the whole grid cell and the square is lost. */
.opt .th{grid-column:1;grid-row:1/3;width:56px;height:56px;border-radius:2px;
  object-fit:cover;background:var(--sand)}
.opt .nm{grid-column:2;grid-row:1;display:block;font-family:"Head",serif;font-size:17px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.opt .ct{grid-column:2;grid-row:2;display:block;margin-top:7px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.opt .side{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;
  align-items:flex-end;gap:11px}
/* nowrap: "$7,200" must never fold, and the column is sized by the stepper anyway. */
.opt .pr{display:block;font-family:"Head",serif;font-size:21px;letter-spacing:.06em;
  color:var(--gold);white-space:nowrap}
/* Against a photograph a single hairline reads as a seam, so a card in the order doubles it
   from the inside — no extra pixel of layout, and the gold is unmistakable. */
.opt.sel{border-color:var(--gold);background:var(--sand);
  box-shadow:inset 0 0 0 1px var(--gold)}

/* The stepper: minus, the number, plus. 40 + 56 + 40 and two hairlines = 138 px, which is
   what the right-hand column of a card is built around. */
.qc{display:flex;align-items:stretch;border:1px solid #DCD5CA;border-radius:2px;overflow:hidden}
.qb{width:40px;padding:0;border:none;background:var(--sand);color:var(--ink);
  font-family:"Head",serif;font-size:19px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s}
.qb:hover{background:var(--gold);color:#FFFDF8}
.qb:disabled{color:#C3BCB0;cursor:default}
.qb:disabled:hover{background:var(--sand);color:#C3BCB0}
/* Narrow, centred, and without the native spinners — the two buttons are the spinner.
   🔴 the blanket input{} rule is width:100%; without the width here the field pushes the
   two buttons out of the card. */
.qn{width:56px;padding:10px 0;border:none;border-left:1px solid #DCD5CA;
  border-right:1px solid #DCD5CA;border-radius:0;text-align:center;font-family:"Head",serif;
  font-size:18px;letter-spacing:.04em;-moz-appearance:textfield;appearance:textfield}
.qn::-webkit-outer-spin-button,.qn::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* The picture of three compositions standing together. It used to sit beside the single
   counter; now that every card carries its own, it belongs to the whole selection and is
   simply always there, under the ten cards. */
.many{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:22px;
  margin-top:18px;align-items:center}
/* 🔴 height:auto is required — the blanket img{} rule is height:100%, and aspect-ratio
   only holds the box when the height is auto. The frame is the one large photograph on
   the page and sits ~2000 px down: left lazy it paints late, and a full-page capture of
   the page caught it as an empty sand rectangle. It loads eagerly for that reason.
   The sand background keeps the box reading as a frame, never as a hole, while it loads. */
.many .trio{width:100%;height:auto;aspect-ratio:760/502;object-fit:cover;border-radius:2px;
  background:var(--sand)}
.many .tl{font-size:13px;line-height:1.8;color:var(--mute);text-align:left}

/* Past our driving range the request does not leave. That is not a form error but an
   invitation to write to us, so the block is sand rather than red. */
.gate{margin-top:18px;padding:22px 24px;border:1px solid var(--line);background:var(--sand);
  text-align:left;font-size:15px;line-height:1.85;color:var(--body)}
.gate b{display:block;margin-bottom:8px;font-family:"Head",serif;font-weight:400;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* How it is settled. These are two statements, not a choice to make on the page: nothing
   is paid here, so .pay.info drops the pointer that .m carries by default. */
.pay{display:grid;gap:12px;margin-top:22px}
.m{display:block;position:relative;margin-bottom:0;padding:18px 22px;border:1px solid #DCD5CA;
  background:#fff;border-radius:2px;text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s}
.m:hover{border-color:var(--line)}
.m:focus-within{border-color:var(--gold)}
.m input{position:absolute;width:1px;height:1px;opacity:0}
.m .t{display:block;font-family:"Head",serif;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.m .s{display:block;margin-top:9px;font-size:14px;line-height:1.8;color:var(--body);
  text-transform:none;letter-spacing:0}
.m .pref{display:inline-block;margin-left:12px;padding:3px 9px;background:var(--gold);
  color:#FFFDF8;font-family:"Man";font-size:9px;letter-spacing:.2em;vertical-align:2px}
.m.sel{border-color:var(--gold);background:var(--sand)}

.pay.info .m{cursor:default}
.pay.info .m:hover{border-color:#DCD5CA}

/* Composition + delivery = total. The first two lines are quiet, the rule above the total
   is the one that matters. */
.sum{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line);text-align:left}
.sum .l{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.sum .v{font-family:"Head",serif;font-size:26px;letter-spacing:.04em;color:var(--ink)}
.sum.q{margin-top:14px;padding-top:0;border-top:none}
/* One row per chosen piece, above Delivery and Total. The label carries the name, the
   carats and the count, so it is the long side: it wraps and the figure stays put. */
.lines .sum{align-items:baseline}
.lines .l{flex:1}
.sum.q.top{margin-top:34px}
.sum .v.s{font-size:18px;color:var(--body)}

.err{margin-top:16px;text-align:left;font-size:14px;line-height:1.8;color:#8C3A2E}
.btn:disabled{background:#B8B2A8;cursor:default}
.btn:disabled:hover{background:#B8B2A8}
.msg{max-width:640px;margin:0 auto;padding:34px 30px;border:1px solid var(--line);
  background:var(--sand);text-align:left}
.msg h2{font-size:21px;margin-bottom:6px}
.msg p{margin-top:16px;font-size:16px;line-height:1.9}
.hide{display:none!important}

@media (max-width:860px){
  .sec{margin-top:42px}
  .opt{padding:17px 16px}
  /* 390 px: 310 px of card inside the padding, 70 of it the thumbnail and its gap. The
     text keeps 240 px — enough for the long name — and the price and the stepper take
     their own row underneath, the price left, the stepper hard right. */
  .opt .side{grid-column:1/-1;grid-row:3;flex-direction:row;align-items:center;
    justify-content:space-between;width:100%;margin-top:15px}
  /* 390 px: the photograph goes above, full width, and the text follows under it. */
  .many{grid-template-columns:1fr;gap:16px}
  .m{padding:16px 18px}
  .sum .v{font-size:23px}
}