:root {
  --cream: #f7f0e4;
  --paper: #eadcc8;
  --ink: #241a15;
  --butter: #e8c15a;
  --copper: #a95f35;
  --pistachio: #69774c;
  --raspberry: #b72f4b;
  --blue-hour: #364452;
  --line: rgba(55,36,27,.22);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Jost', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 35px; overflow-x: clip; scrollbar-color: var(--copper) #e8dccb; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track { background: #e8dccb; }
html::-webkit-scrollbar-thumb { background: linear-gradient(var(--butter),var(--copper)); border: 3px solid #e8dccb; border-radius: 10px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.72; overflow-x: clip; background-image: linear-gradient(90deg,rgba(176,106,59,.045) 1px,transparent 1px); background-size: 72px 100%; font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--copper); }
::selection { background: var(--butter); color: var(--ink); }
:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 99; background: var(--ink); color: var(--cream); padding: 12px 18px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

header { height: 88px; padding: 0 clamp(22px,5vw,80px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; position: relative; z-index: 3; }
header p { margin: 0; }
.brand { display: flex; gap: 10px; align-items: center; width: max-content; min-height: 44px; text-decoration: none; font: 14px/.86 var(--serif); letter-spacing: .02em; text-transform: none; }
.brand i { font-size: 16px; }
.brand svg { width: 32px; fill: none; stroke: var(--copper); stroke-width: 1.8; }
.back { justify-self: end; min-height: 44px; display: flex; align-items: center; text-decoration: none; border-bottom: 1px solid var(--copper); }
.brand svg, .back span { transition: transform .4s cubic-bezier(.16,.8,.2,1); }
.brand:hover svg, .brand:focus-visible svg { transform: rotate(-9deg) translateY(-2px); }
.back span { font-size: 14px; margin-left: 9px; }
.back:hover span, .back:focus-visible span { transform: translate(3px,-3px); }

.guide-hero { min-height: 710px; padding: 118px clamp(24px,9vw,145px) 100px; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; background: linear-gradient(112deg,var(--cream) 0 64%,#e9c55a 64.15%); }
.guide-hero::before { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; right: 5.5vw; top: 72px; border: 1px solid rgba(91,51,33,.28); border-radius: 50%; box-shadow: inset 0 0 0 62px rgba(255,244,193,.12),inset 0 0 0 63px rgba(91,51,33,.14), 0 35px 80px rgba(84,49,27,.08); }
.guide-hero::after { content: ''; position: absolute; width: 1px; height: 150%; left: 53%; top: -20%; background: rgba(87,48,30,.16); transform: rotate(18deg); }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: 9px; font-weight: 600; color: var(--copper); margin: 0 0 18px; }
.guide-hero h1 { font: 400 clamp(72px,9.5vw,140px)/.86 var(--serif); letter-spacing: -.06em; margin: 0; position: relative; z-index: 2; max-width: 980px; }
.guide-hero h1 em { color: var(--copper); font-weight: 400; }
.lede { font: italic 19px/1.55 var(--serif); max-width: 560px; color: #594238; margin: 38px 0 0; position: relative; z-index: 2; }
.hero-notation { position: absolute; left: clamp(24px,9vw,145px); bottom: 37px; display: flex; gap: 26px; font-size: 7px; letter-spacing: .17em; text-transform: uppercase; }
.hero-notation span { border-top: 1px solid var(--copper); padding-top: 8px; }
.folio { position: absolute; right: 9vw; bottom: 62px; z-index: 2; font: italic 24px var(--serif); display: flex; align-items: baseline; gap: 5px; transform: rotate(-5deg); }
.folio strong { font-size: 100px; font-weight: 400; line-height: .7; }
.folio span { font: 600 8px var(--sans); text-transform: uppercase; letter-spacing: .17em; writing-mode: vertical-rl; margin-left: 4px; }

.guide-grid { display: grid; grid-template-columns: 250px minmax(0,820px); gap: clamp(65px,10vw,160px); padding: 125px clamp(24px,9vw,145px) 150px; align-items: start; max-width: 1500px; margin: 0 auto; }
.guide-grid aside { position: sticky; top: 35px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; padding-top: 18px; }
.guide-grid aside::after { content: 'MF / CAHIER 02'; margin-top: 24px; color: var(--copper); font-size: 7px; letter-spacing: .18em; }
.guide-grid aside span { font: italic 19px var(--serif); margin-bottom: 18px; }
.guide-grid aside a { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; text-decoration: none; min-height: 44px; display: flex; align-items: center; border-top: 1px solid var(--line); transition: padding .25s,color .25s; }
.guide-grid aside a:hover { padding-left: 8px; color: var(--copper); }
article { counter-reset: note; }
article section { position: relative; margin-bottom: 145px; }
.section-num { position: absolute; right: 100%; margin-right: 55px; top: -26px; font: italic 58px var(--serif); color: #c8ac93; }
article h2 { font: 400 clamp(45px,5.2vw,72px)/.99 var(--serif); letter-spacing: -.045em; margin: 0 0 40px; text-wrap: balance; font-optical-sizing: auto; }
article p { font-size: 15px; color: #49382f; margin-bottom: 25px; text-wrap: pretty; }
article p::selection { background: var(--butter); }
article code { font: 600 12px var(--sans); background: #ead7c2; padding: 2px 6px; color: #7d412d; }
.process-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 42px -35px; padding: 26px 30px; background: #211713; color: var(--cream); box-shadow: 12px 12px 0 var(--copper); }
.process-strip span { display: flex; flex-direction: column; color: #d5c1b4; font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.process-strip b { color: var(--butter); font: italic 36px/.9 var(--serif); }
.process-strip i { color: var(--copper); font: italic 15px var(--serif); }
.swatches { display: grid; grid-template-columns: repeat(5,1fr); margin: 6px 0 40px; border: 1px solid var(--line); box-shadow: 14px 14px 0 var(--paper); transform: rotate(-.4deg); }
.swatches div { height: 170px; padding: 15px 10px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--swatch); color: var(--ink); border-right: 1px solid rgba(36,26,21,.2); }
.swatches div:nth-child(4), .swatches div:nth-child(5) { color: #fff; }
.swatches div:last-child { border: 0; }
.swatches b { font: italic 17px var(--serif); }
.swatches span { font-size: 8px; letter-spacing: .1em; }
.reproduce { background: radial-gradient(circle at 100% 0,rgba(176,106,59,.2),transparent 35%),#1f1612; color: var(--cream); padding: 66px; margin-left: -55px; margin-right: -55px; box-shadow: 18px 18px 0 var(--butter); transform: rotate(.35deg); }
.reproduce::after { content: 'PROMPT / SPECIMEN'; position: absolute; right: 18px; top: 18px; color: #a98571; writing-mode: vertical-rl; font-size: 7px; letter-spacing: .18em; }
.reproduce h2 { color: var(--butter); max-width: 660px; }
.reproduce p { color: #eadbd1; font-size: 14px; max-width: 680px; }
.reproduce .section-num { color: var(--copper); right: auto; left: -55px; top: -72px; }

footer { background: #100b09; color: #bba89c; padding: 34px clamp(24px,6vw,90px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
footer p { margin: 0; }
footer nav { display: flex; gap: 26px; }
footer a { text-decoration: none; min-height: 44px; display: grid; place-items: center; position: relative; transition: color .25s; }
footer a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--butter); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,.8,.2,1); }
footer a:hover, footer a:focus-visible { color: var(--cream); }
footer a:hover::after, footer a:focus-visible::after { transform: scaleX(1); }
.footer-mark { justify-self: end; font: italic 13px var(--serif); color: var(--butter); }
.footer-mark span { color: var(--raspberry); }

@media (max-width: 950px) {
  .guide-hero { padding-left: 50px; min-height: 680px; }
  .guide-hero::before { width: 390px; height: 390px; right: 5vw; top: 110px; }
  .guide-grid { grid-template-columns: 180px 1fr; padding: 95px 50px 120px; gap: 60px; }
  .section-num { display: none; }
  .reproduce { margin-left: 0; margin-right: 0; padding: 48px; }
  .process-strip { margin-left: 0; margin-right: 0; }
  footer { grid-template-columns: 1fr 1fr; }
  footer nav { justify-content: flex-end; }
  .footer-mark { display: none; }
}

@media (max-width: 600px) {
  body { background-size: 48px 100%; }
  header { height: 72px; padding: 0 18px; grid-template-columns: 1fr auto; }
  header > p { display: none; }
  .brand { font-size: 12px; gap: 7px; }
  .brand i { font-size: 13px; }
  .brand svg { width: 27px; }
  .back { font-size: 8px; }
  .guide-hero { min-height: 660px; padding: 92px 20px 135px; justify-content: center; background: linear-gradient(165deg,var(--cream) 0 62%,#e9c55a 62.15%); }
  .guide-hero::before { width: 245px; height: 245px; right: -55px; top: auto; bottom: 28px; box-shadow: inset 0 0 0 30px rgba(255,244,193,.12),inset 0 0 0 31px rgba(91,51,33,.14); }
  .guide-hero::after { left: 66%; }
  .guide-hero h1 { font-size: 60px; }
  .lede { font-size: 16px; max-width: 340px; margin-top: 30px; }
  .hero-notation { left: 20px; bottom: 26px; gap: 12px; max-width: 190px; flex-wrap: wrap; }
  .folio { right: 20px; bottom: 46px; }
  .folio strong { font-size: 66px; }
  .guide-grid { display: block; padding: 70px 20px 95px; }
  .guide-grid aside { position: static; margin-bottom: 82px; }
  article section { margin-bottom: 98px; }
  article h2 { font-size: 43px; }
  article p { font-size: 14px; }
  .process-strip { grid-template-columns: repeat(4,1fr); gap: 0; margin: 36px 0 44px; padding: 22px 15px; box-shadow: 8px 8px 0 var(--copper); }
  .process-strip i { display: none; }
  .process-strip span { border-right: 1px solid rgba(255,255,255,.14); padding-left: 8px; }
  .process-strip span:last-child { border: 0; }
  .process-strip b { font-size: 29px; }
  .swatches { grid-template-columns: repeat(2,1fr); box-shadow: 8px 8px 0 var(--paper); }
  .swatches div { height: 116px; }
  .swatches div:last-child { grid-column: 1/3; }
  .reproduce { padding: 40px 25px; margin: 0 0 20px; box-shadow: 9px 9px 0 var(--butter); transform: none; }
  .reproduce h2 { font-size: 40px; }
  .reproduce p { font-size: 13px; }
  footer { grid-template-columns: 1fr; text-align: center; padding: 35px 20px; }
  footer nav { justify-content: center; flex-wrap: wrap; gap: 0 22px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }