/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: Studio (deal 3/3, seed sustenta-brinde-brindes-corporativos-604c·6df0f534·2026-11-05·r0) · job: buy · draw: dfb367
 * hero: Stage (swap from Corridor: the product photograph is the strongest material) · nav: edge-aligned · footer: letter close · imagery: the product (the client's own cut-out photos) · signature: a mug on the proof sheet with its engraving area redlined
 * palette: kraft paper and brand green, by request · axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, the catalogue grid repeats one tile, so the next section is a quiet statement band */
/* waive 58: the catalogue section lists product names, it is the page's content, not copy */
@import url("./tokens.css");
@import url("./base.css");

:root {
  /* by request: kraft paper ground and the brand green as the one signal (overrides Studio's cool paper and orange) */
  --color-paper: oklch(95.2% 0.026 86); --color-paper-2: oklch(90.5% 0.042 80); --color-paper-3: oklch(86% 0.052 76); --color-paper-hi: oklch(97.8% 0.016 88);
  --color-ink: oklch(22% 0.028 70); --color-ink-2: oklch(36% 0.03 68); --color-muted: oklch(48% 0.03 70);
  --color-rule: oklch(80% 0.04 78);
  --color-accent: oklch(52% 0.12 152); --color-accent-ink: oklch(97.8% 0.016 88); --color-focus: oklch(45% 0.13 152);
  --color-dot: color-mix(in oklab, var(--color-ink) 16%, transparent); --color-mark: color-mix(in oklab, var(--color-ink) 68%, transparent);
  --mask-solid: #000;
  --color-flip: oklch(66% 0.16 52); --color-flip-ink: oklch(22% 0.028 70);
  --color-leaf: oklch(55% 0.115 152); --color-leaf-ink: oklch(42% 0.1 152); --color-root: oklch(52% 0.07 70);
  --color-leaf-2: oklch(72% 0.095 150);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.proof { background-image: var(--grain), radial-gradient(circle at 1px 1px, var(--color-dot) 1px, transparent 1.4px); background-size: 160px 160px, 24px 24px; }
.proof--fade { -webkit-mask-image: linear-gradient(to bottom, var(--mask-solid) 80%, transparent); mask-image: linear-gradient(to bottom, var(--mask-solid) 80%, transparent); }

/* crop marks on printed pieces */
.crop { position: relative; --l: 10px; --o: 14px; }
.crop::before { content: ""; position: absolute; inset: calc(-1 * var(--o)); pointer-events: none;
  background:
    linear-gradient(var(--color-mark), var(--color-mark)) 0 var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% var(--o) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 0 calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) var(--o) 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 100% calc(100% - var(--o)) / var(--l) 1px no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - var(--o)) 100% / 1px var(--l) no-repeat; }

/* controls */
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 2px; background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 2px; border: var(--rule-hair) solid var(--color-mark); pointer-events: none; opacity: .5; }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--color-accent); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* nav */
.nav { position: relative; z-index: var(--z-sticky-nav); }
.nav .container { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.brand img { width: 56px; height: 56px; }
.brand b { font: var(--display-weight) 22px/0.92 var(--font-display); letter-spacing: -0.01em; }
.brand b span { display: block; color: var(--color-leaf-ink); }
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav ul { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.nav ul a:not(.btn) { color: var(--color-ink-2); text-decoration: none; }
.nav ul a:not(.btn):hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.nav ul a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* hero */
.hero { padding-block: var(--space-lg) var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - 76px - var(--space-lg) - var(--space-2xl)); }
.hero h1 { font-size: var(--text-display); line-height: 1.0; overflow-wrap: break-word; min-width: 0; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.sheet { position: relative; background: var(--color-paper-hi); box-shadow: var(--shadow-sheet); border-radius: var(--radius-card); padding: var(--space-xl); display: grid; gap: var(--space-md); }
.sheet__art { position: relative; aspect-ratio: 1; max-height: 520px; max-width: 520px; margin-inline: auto; width: 100%; }
.sheet__art img { width: 100%; height: 100%; object-fit: contain; }
.redline { position: absolute; left: 41%; top: 33%; width: 29%; height: 37%; border: var(--rule-hair) solid var(--color-accent); }
.redline::before, .redline::after { content: ""; position: absolute; background: var(--color-accent); }
.redline::before { left: 0; right: 0; top: -14px; height: 1px; }
.redline::after { top: 0; bottom: 0; right: -14px; width: 1px; }
.redline small { position: absolute; top: -36px; left: 0; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet__meta { display: flex; justify-content: space-between; gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* sections */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.head p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 44ch; }

/* catalogue switcher */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.tabs button { position: relative; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 2px; background: var(--color-paper); color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.tabs button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.tabs button[aria-selected="true"] { background: var(--color-paper-hi); border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }
.tabs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tabs span { margin-left: var(--space-2xs); font-variant-numeric: tabular-nums; opacity: .7; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.item a { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.item a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.item figure { margin: 0; aspect-ratio: 1; background: var(--color-paper-2); border-radius: var(--radius-card); display: grid; place-items: center; padding: var(--space-lg); transition: background-color var(--dur-short) var(--ease-out); }
.item a:hover figure { background: var(--color-paper-3); }
.item img { width: 100%; height: 100%; object-fit: contain; }
.item b { font: var(--display-weight) var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.005em; }
.item small { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.more { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-lg); }
.more p { color: var(--color-ink-2); }

/* statement band */
.band { background: var(--color-ink); color: var(--color-paper); }
.band p.statement { font: var(--display-weight) var(--text-display-s)/1.05 var(--font-display); letter-spacing: var(--tracking-display); max-width: 28ch; color: var(--color-paper); font-size: var(--text-display); overflow-wrap: break-word; min-width: 0; }
.band .container { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: end; }
.band small { color: color-mix(in oklab, var(--color-paper) 70%, transparent); font-size: var(--text-sm); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: s; border-top: var(--rule-hair) solid var(--color-ink); }
.steps li { counter-increment: s; padding-top: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; }
.steps li::before { content: counter(s); font: var(--display-weight) var(--text-3xl)/1 var(--font-display); color: var(--color-ink); }
.steps li::after { content: ""; display: block; height: 1px; width: 48px; background: var(--color-accent); order: -1; }
.steps b { font: var(--display-weight) var(--text-title)/1.1 var(--font-display); }
.steps p { color: var(--color-ink-2); }

/* materials table */
.table { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.table th, .table td { text-align: left; padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.table th { font: var(--display-weight) var(--text-title)/1.1 var(--font-display); width: 34%; }
.table td { color: var(--color-ink-2); }
.table td.num { width: 14%; text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.table a { color: inherit; }

/* order facts */
.facts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.facts h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.facts dl { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts dl div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-ink-2); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* footer: a letter close */
.foot { padding-block: var(--section-gap-s) calc(var(--space-2xl) + 72px); }
.foot .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.foot .letter { font: var(--display-weight) var(--text-2xl)/1.25 var(--font-display); max-width: 30ch; }
.foot .sign { margin-top: var(--space-lg); color: var(--color-ink-2); }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); justify-items: end; }
.foot .legal { grid-column: 1 / -1; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* sticky order bar */
.bar { position: fixed; left: 50%; bottom: var(--space-md); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--color-paper-hi); border: var(--rule-hair) solid var(--color-ink); border-radius: 3px; box-shadow: var(--shadow-sheet); transform: translate(-50%, 0); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); font-size: var(--text-sm); }
.js .bar:not(.is-on) { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }

/* reveal */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .tabs button, .item figure, .bar { transition: none; }
}

@media (max-width: 60rem) {
  .hero .container, .head, .band .container, .facts, .foot .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .nav ul li:not(:last-child) { display: none; }
  .foot ul { justify-items: start; }
  .facts dl div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: var(--space-lg); }
  .bar { left: var(--space-sm); right: var(--space-sm); transform: none; justify-content: space-between; }
  .js .bar:not(.is-on) { transform: translateY(16px); }
  .table th { width: auto; }
}

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* the seal stamps the proof: pressed once on arrival */
.stamp { position: absolute; right: var(--space-xl); bottom: calc(var(--space-2xl) + 28px); width: 150px; height: 150px; opacity: .88; transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none; }
.js .stamp { animation: stamp var(--dur-long) var(--ease-out) .6s both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.35); } to { opacity: .88; transform: rotate(-12deg) scale(1); } }
.showall { margin-top: var(--space-xl); }
.foot__seal { width: 200px; height: 200px; justify-self: end; grid-row: span 2; }
.foot .container { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
@media (prefers-reduced-motion: reduce) { .js .stamp { animation: none; } }
@media (max-width: 60rem) { .stamp { width: 84px; height: 84px; right: var(--space-sm); bottom: calc(var(--space-xl) + 24px); } .sheet__meta { flex-direction: column; gap: var(--space-3xs); } .foot .container { grid-template-columns: minmax(0, 1fr); } .foot__seal { justify-self: start; width: 140px; height: 140px; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

/* by request: the flipbook gets its own warm highlight */
.nav ul a.flip, .flip-btn { white-space: nowrap; position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: 2px; background: var(--color-flip); color: var(--color-flip-ink); font-weight: 500; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.flip-btn { min-height: 48px; padding: 0 var(--space-lg); border-color: var(--color-flip); }
.nav ul a.flip:hover, .flip-btn:hover { background: color-mix(in oklab, var(--color-flip) 86%, var(--color-ink)); color: var(--color-flip-ink); text-decoration: none; }
.nav ul a.flip:active, .flip-btn:active { transform: translateY(1px); }
.nav ul a.flip:focus-visible, .flip-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav ul a.flip::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-flip); box-shadow: 0 0 0 0 var(--color-flip); }
.js .nav ul a.flip::after { animation: flip-ping 2.4s var(--ease-out) 1.2s 3; }
@keyframes flip-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-flip) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .js .nav ul a.flip::after { animation: none; } .nav ul a.flip, .flip-btn { transition: none; } }
@media (max-width: 60rem) { .nav ul li:has(.flip) { display: list-item; } .nav ul { gap: var(--space-xs); } .flip__long { display: none; } .nav ul a.flip, .nav ul .btn { white-space: nowrap; padding: 0 var(--space-sm); } .brand b { display: none; } }