/* 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{position:relative;height:min(78vh,720px);overflow:hidden}
/* The flowers live in the upper half of hero.jpg; a centred frame opens on the boxes.
   30% is the lowest value that still keeps the model's face whole above the band's edge. */
.hero img{filter:brightness(.52) saturate(.88);object-position:50% 30%}
.hero .shade{position:absolute;inset:0;background:
  radial-gradient(60% 55% at 50% 48%,rgba(10,10,9,.55) 0%,rgba(10,10,9,.18) 70%,rgba(10,10,9,0) 100%),
  linear-gradient(180deg,rgba(10,10,9,.55) 0%,rgba(10,10,9,.28) 38%,rgba(10,10,9,.70) 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 */
.stone{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.stone .ph{overflow:hidden;position:relative;min-height:360px}
/* Framing of the photographs (17.10.2026). Every picture is taller than it is wide and
   the flowers sit in its upper half, so a frame centred on the middle of the file shows
   the box and the model's legs rather than the composition. Two things fix that:
     · the image is taken out of flow, so the text column sets the height of the card.
       In flow, an <img> with height:100% inside a height:auto cell falls back to its own
       proportions, the cell grows to the whole photograph, and object-fit crops nothing;
     · each photograph is then given its own object-position — the per-file values below. */
.stone .ph img{position:absolute;inset:0}
.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}
.stone.rev .ph{order:2}
.alt{background:#F2EEE7}

/* Where the flowers are in each file, as a share of its height. The value is the share
   of the spare height taken off the top, so a small number keeps the top of the dome. */
.ph-diamond   img{object-position:50% 50%}  /* diamond_crop.jpg is already cut to the dome */
.ph-ruby      img{object-position:50% 5%}   /* roses 11–51%, burgundy box below them */
.ph-morganite img{object-position:50% 13%}  /* three domes, 14–62% */
.ph-sapphire  img{object-position:50% 20%}  /* hydrangea 12–51%, keeps the gold wordmark */
.ph-redroom   img{object-position:50% 45%}
.ph-whiteroom img{object-position:50% 50%}

/* 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{grid-template-columns:1fr}
  .stone.rev .ph{order:0}            /* on a phone the photograph is always on top */
  .stone .ph{min-height:300px;height:62vw;max-height:460px}
  .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}
.many .trio{width:100%;height:auto;aspect-ratio:760/502;object-fit:cover;border-radius:2px}
.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}
}