/* Catherine D. Gemstones — final art direction.
   The hero photograph now carries its own soft, organic edge (alpha), so the
   rectangular CSS mask of the earlier versions is removed. */
.hero-jewel>img{-webkit-mask-image:none;mask-image:none}
.hero-jewel figcaption{color:#d9d3c2}
/* design archive on ivory paper (was a black engineering screen) */
.cad .photo-open{background:transparent}
.cad img{aspect-ratio:1479/1110;mix-blend-mode:normal;background:transparent;box-shadow:0 1px 0 #d9d2c2,0 18px 40px -28px #3b3426}
.creation-stars .photo-open>img{object-position:center 48%}
/* essence background (Demo V1.1): one image composed from the intro's own layers — the jaguar is
   the same backlit silhouette as in the opening, standing on the same mossy log */
@media(max-width:700px){.world-background img{object-position:43.5% center}}

/* ---- Fit the opening screen to the viewport (Demo V1 · 2026-10-11) ----
   The hero was composed for a fixed height (960px desktop, 1000px ≥1600, 850px tablet, 844px phone).
   On shorter screens (laptops at 125–150% scaling, browsers with toolbars) the lower half — the gems and
   the "Explore" link — fell below the fold. Every vertical measure now scales with the viewport height
   when the screen is shorter than the design, and stays exactly as designed when it is taller. */
@media(min-width:1151px){
  .hero{height:min(960px,100vh);height:min(960px,100svh);min-height:540px}
  .hero-heading{top:min(165px,17.2svh)}
  .hero h1{font-size:min(clamp(76px,8vw,123px),12.8svh)}
  .hero-heading>p{margin-top:min(30px,3.1svh)}
  .hero-jewel{top:min(130px,13.5svh);width:min(70%,1020px,105svh)}
  .hero-botanical{width:min(460px,48svh);top:max(-140px,-14.6svh)}
  .hero-link{bottom:min(180px,18.75svh)}
  .hero-footnote{bottom:min(40px,4.2svh)}
  .scroll-hint{bottom:min(35px,3.6svh)}
  .world{height:min(860px,max(620px,100svh))}
}
@media(min-width:1600px){
  .hero{height:min(1000px,100vh);height:min(1000px,100svh)}
  .hero-heading{top:min(165px,16.5svh)}
  .hero h1{font-size:min(clamp(76px,8vw,123px),12.3svh)}
  .hero-jewel{top:min(130px,13svh);width:min(70%,1020px,102svh)}
  .hero-link{bottom:min(180px,18svh)}
  .hero-footnote{bottom:min(40px,4svh)}
  .world{height:min(940px,max(620px,100svh))}
}
@media(max-width:1150px) and (min-width:701px){
  .hero{height:min(850px,100vh);height:min(850px,100svh);min-height:520px}
  .hero-heading{top:min(165px,19.4svh)}
  .hero h1{font-size:min(88px,10.35svh)}
  .hero-jewel{top:min(160px,18.8svh);width:min(780px,91.8svh)}
  .hero-link{bottom:min(125px,14.7svh)}
  .hero-footnote{bottom:min(40px,4.7svh)}
}
@media(max-width:700px){
  .hero{height:min(844px,100vh);height:min(844px,100svh);min-height:560px}
  .hero-heading{top:min(138px,16.35svh)}
  .hero h1{font-size:min(53px,6.28svh)}
  .hero-jewel{top:min(260px,30.8svh);width:min(480px,56.9svh)}
  .hero-link{bottom:min(100px,11.85svh)}
  .hero-footnote{bottom:min(30px,3.55svh)}
  .scroll-hint{bottom:min(24px,2.85svh)}
}
@media(min-width:1151px) and (max-height:940px){.hero-jewel figcaption{right:15%;bottom:max(9%,calc(100% - 86.5svh + 26px))}}

/* ==== Site-wide consistency (Demo V1 · 2026-10-11) ====================================
   1. Images sit on the page as paper cards with a soft lift — the same treatment as the
      design sheet, note card and letter on Sob medida.
   2. One type scale for all three pages: body 17px (phone 16), small notes 13px, labels 12px. */
:root{--card-shadow:0 1px 0 #dcd4c3,0 24px 48px -30px rgba(59,52,38,.62);--card-shadow-dark:0 0 0 1px rgba(192,178,134,.16),0 36px 70px -34px rgba(0,0,0,.78)}
.creation .photo-open,.archive-photo>img{box-shadow:var(--card-shadow);background:var(--ivory)}
.cad img{box-shadow:var(--card-shadow)}
.creation .photo-open{overflow:hidden}
/* type */
.hero-heading>p{font-size:18px}
.world-copy p{font-size:17px;letter-spacing:.3px}
.world-copy .text-link,.creation .text-link.small{font-size:14px}
.section-heading>p{font-size:17px;line-height:1.72;max-width:380px}
.creation-caption p{font-size:13px}
.section-note,.process-note,.cad figcaption,.archive-photo figcaption span,.detail-copy .detail-caption{font-size:13px;line-height:1.6}
.process li p{font-size:16px;line-height:1.7;max-width:380px}
.process>.text-link,.hero-link{font-size:15px}
.detail-copy>p,.contact>p{font-size:17px}
.hero-jewel figcaption,.art-caption,.print-study figcaption{font-size:12px}
.hero-footnote{font-size:11px}.hero-footnote span{font-size:11px}
.instagram{font-size:13px}.contact .contact-note{font-size:12px}
.footer nav{font-size:13px}.credits-button{font-size:12px}.footer-brand small{font-size:8px}
.modal-note{font-size:12px!important;line-height:1.6}
@media(max-width:1150px) and (min-width:701px){.section-heading>p{font-size:16px}}
@media(max-width:700px){
  .hero-heading>p{font-size:15px;max-width:260px}
  .hero-link{font-size:15px}
  .hero-footnote,.hero-footnote span{font-size:10px}
  .hero-jewel figcaption,.art-caption,.print-study figcaption{font-size:11px}
  .world-copy p{font-size:16px}
  .world-copy .text-link{font-size:14px}
  .section-heading>p{font-size:16px;max-width:320px}
  .creation-caption p,.creation .text-link.small{font-size:13px}
  .section-note,.process-note,.cad figcaption,.archive-photo figcaption span,.detail-copy .detail-caption{font-size:13px}
  .process li p{font-size:15px}
  .process>.text-link{font-size:15px}
  .detail-copy>p,.contact>p{font-size:16px}
  .instagram{font-size:13px}.contact .contact-note{font-size:12px}
  .footer nav{font-size:14px}.credits-button{font-size:12px}
}
.print-study figcaption{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(10,16,12,.9)}
/* the design sheet's shadow was clipped by its zoom button (overflow:hidden): lift the button instead */
.cad img{box-shadow:none}
.cad .photo-open{box-shadow:var(--card-shadow)}
/* homepage gallery uses the same studio plates as Criações */
.creation-main .photo-open>img{aspect-ratio:.86;object-position:62% center}
.creation-rings .photo-open img{aspect-ratio:.86;object-position:center 50%}
.creation-stars .photo-open>img{aspect-ratio:1.6;object-position:center 40%}
@media(max-width:700px){.creation-main .photo-open>img{aspect-ratio:.95}.creation-stars .photo-open>img{aspect-ratio:1.3}}
/* audit: no running text below 12px (the spaced "GEMSTONES" under the logo is part of the wordmark) */
.hero-footnote,.hero-footnote span,.intro-skip{font-size:12px}
@media(max-width:700px){.hero-jewel figcaption,.art-caption,.print-study figcaption,.hero-footnote,.hero-footnote span{font-size:12px}}

/* ==== taste-skill review (2026-10-12) ==== */
/* H2: section heads read top-down (headline, then its line of context), no floating corner paragraph */
.section-heading{display:block}
.section-heading>p{margin-top:26px;max-width:30em;padding-right:0}
/* M5: slimmer navigation bar (was 107px) */
@media(min-width:701px){.header{padding-top:13px;padding-bottom:13px}}
/* Jost sits a touch smaller than Arial at the same size: keep running text at the same optical size */
body{letter-spacing:.005em}

/* Critique pass 2026-10-12: packaging caption sits on a quiet shade instead of the engraving */
.print-study::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(20,28,20,0),rgba(20,28,20,.82));pointer-events:none}
.print-study figcaption{z-index:1}

/* 2026-10-23: a way from the three featured pieces to the whole catalogue */
.creations-all{margin-top:56px}
@media(max-width:700px){.creations-all{margin-top:40px}}

/* ------------------------------ homepage collection (2026-10-24) ------------------------------ */
/* after the opening line, the pieces themselves: categories, eight cards, then the bespoke invitation */
.home-categories{display:flex;flex-wrap:wrap;gap:0 30px;margin:36px 0 40px}
.home-categories a{display:inline-flex;align-items:center;min-height:44px;font:italic 21px/1.2 var(--serif);color:#5b604d;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.home-categories a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.home-collection .creations-all{margin-top:52px}
.atelier-teaser{align-self:center}
.atelier-teaser p{font-size:18px;line-height:1.75;max-width:24em;margin:0 0 24px}
.atelier-teaser .text-link{font-size:15px}
@media(max-width:700px){
  .home-categories{flex-wrap:nowrap;overflow-x:auto;margin:24px -24px 28px;padding-inline:24px;gap:0 22px;scrollbar-width:none}
  .home-categories::-webkit-scrollbar{display:none}
  .home-categories a{flex:none;font-size:18px}
  .home-collection .creations-all{margin-top:36px}
  .atelier-teaser p{font-size:16px}
}
/* the bespoke invitation sits beside the design study; the collection heading shares a line with its note */
.atelier-teaser .section-heading{margin-bottom:30px}
.atelier-teaser .section-heading h2{font-size:clamp(46px,4.4vw,70px)}
@media(min-width:701px){
  .home-collection .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 56px;flex-wrap:wrap}
  .home-collection .section-heading>p{margin-top:0}
  .home-categories{margin:24px 0 36px}
}
.atelier-teaser .section-heading>p{margin-top:22px}

/* ------------------------------ bespoke cases (2026-10-24) ------------------------------ */
/* a row of bespoke pieces beside the invitation: the design study first, then the cases as they arrive.
   Every picture opens Sob medida. On phones the row swipes; the arrows step one case at a time. */
.cases{position:relative;min-width:0}
.cases-track{list-style:none;margin:0 -24px;padding:0 24px 34px;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;scrollbar-width:none;overscroll-behavior-x:contain}
.cases-track::-webkit-scrollbar{display:none}
.case{scroll-snap-align:start;min-width:0}
.case figure{margin:0}
.case .photo-open{display:block}
.case-photo{display:block;background:#fbf8f1;padding:14px;box-shadow:var(--card-shadow)}
.case-photo img{display:block;width:100%;aspect-ratio:1479/1110;object-fit:cover}
.case figcaption{font-size:13px;line-height:1.6;color:#606751;margin-top:14px}
.case figcaption b{display:block;font:400 26px/1.15 var(--serif);color:var(--ink);margin-bottom:6px}
.case figcaption span{display:block}
.case figcaption:empty{display:none}
.cases-nav{display:flex;align-items:center;gap:6px;margin-top:-6px}
.cases-nav button{width:44px;height:44px;display:grid;place-items:center;color:var(--ink);transition:opacity .2s}
.cases-nav button:disabled{opacity:.3;cursor:default}
.cases-nav svg{width:26px;fill:none;stroke:currentColor;stroke-width:1.2}
.cases-count{font-size:13px;letter-spacing:.3px;color:#5b604d;min-width:52px;text-align:center;margin:0}
@media(max-width:700px){.cases-track{gap:24px}}
/* bespoke cases, round 2 (2026-10-24): the controls sit over the picture like the piece cards' photo arrows:
   arrows at the edges (shown on hover, always on touch screens), dots at the bottom; the count is for screen readers */
.cases-nav{position:absolute;left:0;right:0;top:0;aspect-ratio:1479/1110;margin:0;display:block;pointer-events:none}
.cases-nav[hidden]{display:none}
.cases-nav .gallery-prev,.cases-nav .gallery-next{pointer-events:auto;width:44px;height:44px}
.cases-nav .gallery-prev{left:6px}
.cases-nav .gallery-next{right:6px}
.cases:hover .cases-nav :is(.gallery-prev,.gallery-next),.cases:focus-within .cases-nav :is(.gallery-prev,.gallery-next){opacity:1}
.cases-dots{bottom:16px}
.cases-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
/* bespoke block, round 3 (2026-10-24): the heading on one line, a smaller picture, less empty space */
.atelier-teaser .section-heading h2 br{display:none}
.atelier-teaser .section-heading h2 em{display:inline}
@media(min-width:1151px){
  .atelier.section-pad{padding-top:88px;padding-bottom:88px}
  .atelier .atelier-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .atelier-teaser .section-heading h2{font-size:clamp(34px,2.8vw,46px);white-space:nowrap;letter-spacing:-.6px}
}
/* collection heading on one line, with less air above it (2026-10-24) */
.home-collection.section-pad{padding-top:72px}
.home-collection .section-heading h2{font-size:clamp(48px,4.6vw,70px)}
@media(max-width:700px){.home-collection.section-pad{padding-top:56px}.home-collection .section-heading h2{font-size:44px}}
/* bespoke heading, round 4 (2026-10-24): "Sob medida" on the first line, "como nenhuma outra." on the second */
.atelier-teaser .section-heading h2 em{display:block}
@media(min-width:1151px){.atelier-teaser .section-heading h2{white-space:normal}}
@media(max-width:700px){.atelier-teaser .section-heading h2{font-size:clamp(32px,10.4vw,44px)}}

/* ---- Hero refinement (2026-10-27): one text block, everything on the page margins ----
   1. "Explore as criações" sits 56px under the subtitle, so headline, subtitle and link read as one block
      (its top follows the headline size, which scales with the screen height).
   2. The demo-only "Rever abertura" becomes a quiet text link on the left margin at the bottom, off the jewels.
   3. The caption ends on the right margin (64px), the same line as "Converse sobre sua joia".
   4. The photograph is 4% smaller (right edge unchanged), so the pendant's chain clears the headline.
   5. The subtitle is 21px, closer to the headline. */
@media(min-width:1151px){
  .hero{--hero-fs:min(clamp(76px,8vw,123px),12.8svh);--hero-top:min(165px,17.2svh)}
  .hero h1{font-size:var(--hero-fs)}
  .hero-heading>p{font-size:21px;margin-top:min(24px,2.5svh)}
  .hero-link{bottom:auto;top:calc(var(--hero-top) + var(--hero-lines,1.76) * var(--hero-fs) + min(24px,2.5svh) + 35px + 56px)}
  .hero-jewel{width:min(67.2%,980px,100.8svh)}
  .hero-jewel figcaption{right:calc(var(--gutter) - 1vw);bottom:calc(100% - min(960px,100svh) + 53px + min(130px,13.5svh))}
}
@media(min-width:1600px){
  .hero{--hero-fs:min(clamp(76px,8vw,123px),12.3svh);--hero-top:min(165px,16.5svh)}
  .hero-link{left:6%}
  .hero-jewel{width:min(67.2%,980px,97.9svh)}
  .hero-jewel figcaption{bottom:calc(100% - min(1000px,100svh) + 53px + min(130px,13svh))}
}
.intro-replay{left:var(--gutter);right:auto;bottom:40px;min-height:44px;padding:12px 0;border:0;background:transparent;backdrop-filter:none;
  font-size:12px;opacity:.8}
.intro-replay:hover,.intro-replay:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){.intro-replay{left:24px;right:auto;bottom:30px}}

/* ---- Hero margin (2026-10-27): the hero text moves in from the edge ----
   Headline, subtitle, "Explore as criações" and "Rever abertura" share one left line, further in than the page gutter;
   on the phone the photograph also starts lower, so the pendant's chain keeps clear of the subtitle. */
:root{--hero-x:clamp(96px,7.5vw,150px)}
@media(max-width:1150px) and (min-width:701px){:root{--hero-x:60px}}
@media(max-width:700px){
  :root{--hero-x:clamp(28px,9vw,40px)}
  .hero-heading{right:16px}
  .hero-jewel{top:min(304px,36svh);width:min(456px,54svh)}
  .hero-link{bottom:min(84px,10svh)}
}
.hero .hero-heading,.hero .hero-link,.hero .hero-footnote,body .intro-replay{left:var(--hero-x)}
/* phone only (2026-10-27): the photograph a little larger and further right; the caption stays centred on the screen */
@media(max-width:700px){
  .hero-jewel{--jewel-shift:4vw;width:min(490px,58svh);transform:translateX(calc(-50% + var(--jewel-shift)))}
  .hero-jewel figcaption{left:50%;right:auto;width:min(300px,82vw);transform:translateX(calc(-50% - var(--jewel-shift)));bottom:calc(12% + 1.5svh)}
  .hero-link{bottom:min(66px,7.8svh)}
  body .intro-replay{bottom:min(18px,2.1svh)}
}
/* phone only (2026-10-27): no caption under the hero photograph (the note under "Nossas criações" still says the
   backgrounds are recomposed) */
@media(max-width:700px){.hero-jewel figcaption{display:none}}
/* 2026-10-27: "Rever abertura" sits inside the hero now and scrolls away with it (fixed, it ran over the footer) */
body .intro-replay{position:absolute}
/* UI review round (2026-10-27): 11. the note under the pieces reads as one short paragraph, not one 1300px line;
   12. the bespoke title beside the cases a step larger, so the column holds its own against the photograph */
.section-note{max-width:640px}
@media(min-width:1151px){.atelier-teaser .section-heading h2{font-size:clamp(40px,3.4vw,56px)}}

/* 2026-10-27: the hero is the pendant and earrings on a stone backdrop in the brand greens, lit from the upper right
   (both pictures made by tools/prepare_hero_composite.py). The backdrop replaces the faint forest; on large screens
   the pieces move in toward the headline so the middle does not open up. */
.hero-atmosphere{background:url('media/final/hero-ground.webp') center/cover;opacity:1}
/* from 1600px the headline's size follows the screen height as well as its width, so the pieces are placed from the
   headline: the chain starts about 70px right of "extraordinário." (6.58 of the Portuguese headline's size from the
   6% margin; the chain sits at 16% of the picture's width). Chinese pages use the same place. */
@media(min-width:1600px){.hero-jewel{right:auto;left:min(calc(6% + 6.58 * min(clamp(76px,8vw,123px),12.3svh) + 70px - .16 * min(67.2%,980px,97.9svh)),calc(100% - 64px - .8 * min(67.2%,980px,97.9svh)))}}
/* (the second value keeps the last earring 64px inside the right edge on tall, narrow-ish screens) */

/* 2026-10-28: under the bespoke block, a way into the founder's story (nossa-historia.html): the words on the left,
   the forest at first light on the right as a paper card; on the phone the picture comes first */
.story-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:center;padding:120px var(--gutter);background:#f5f0e7;color:var(--ink)}
.story-teaser-copy{max-width:520px;justify-self:end}
.story-teaser-label{margin:0 0 20px;font:500 12px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#766b46}
.story-teaser h2{margin:0;font:400 clamp(42px,4.2vw,64px)/1.05 var(--serif);letter-spacing:-1px}
.story-teaser-lede{margin:26px 0 30px;font-size:18px;line-height:1.75;color:#3e4436;max-width:27em}
.story-teaser-media{margin:0;padding:12px;background:#fbf8f1;box-shadow:var(--card-shadow);max-width:560px}
.story-teaser-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:65% 40%}
@media(max-width:900px){.story-teaser{grid-template-columns:minmax(0,1fr);gap:36px;padding:80px 24px}.story-teaser-copy{justify-self:start}.story-teaser-media{order:-1}}
@media(max-width:700px){.story-teaser h2{font-size:38px}.story-teaser-lede{font-size:16px}}
html[lang^="zh"] .story-teaser-label{text-transform:none;letter-spacing:.2em;font-weight:400}
html[lang^="zh"] .story-teaser h2{font:300 clamp(36px,3.4vw,48px)/1.35 var(--serif);letter-spacing:.08em}
html[lang^="zh"] .story-teaser-lede{font:400 21px/1.8 var(--lead);letter-spacing:0;text-wrap:balance}
@media(max-width:700px){html[lang^="zh"] .story-teaser h2{font-size:32px;letter-spacing:.04em}html[lang^="zh"] .story-teaser-lede{font-size:17px}}
/* 2026-10-28: the homepage closing over the jaguar engraving, like the closing of every other page (pages.css) */
.contact::before{content:"";position:absolute;inset:0;z-index:-2;background:url('media/print-study.webp') center 60%/cover;opacity:.5}
.contact::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(24,39,29,.92) 0%,rgba(24,39,29,.75) 45%,rgba(24,39,29,.35) 100%)}
.contact .contact-botanical{display:none}
/* aesthetic check (2026-10-28): 2. the story block keeps the page's left line (64px) and pairs with the bespoke block
   above: same picture width and same height of section; 8. "Ver todas as criações" and the note share one line */
.story-teaser{padding-block:88px}
.story-teaser-copy{justify-self:start}
.story-teaser-media{max-width:620px;justify-self:end;width:100%}
@media(max-width:900px){.story-teaser-media{justify-self:start}}
.creations-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 48px;margin-top:52px}
.creations-foot .text-link{margin:0}
.creations-foot .section-note{margin:0;max-width:560px;text-align:right}
@media(max-width:700px){.creations-foot{display:block}.creations-foot .section-note{margin-top:28px;text-align:left}}
.creations-foot .section-note{border-top:0;padding-top:0}
/* 2026-10-28: the story teaser shows the founder's portrait (media/story/founder.webp), so the frame turns upright (4:5)
   and a little narrower, the face kept in view */
.story-teaser-media{max-width:440px}
.story-teaser-media img{aspect-ratio:4/5;object-position:50% 22%}
@media(max-width:900px){.story-teaser-media{max-width:420px}}