/* Machiavelli Analitica. Pietra serena: pale plaster, grey stone, one dark room at the top.
   One deliberate light look, like the printed brief. No scripts. */

@font-face{font-family:'Bodoni Moda';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/bodoni-moda-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/bodoni-moda-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/bodoni-moda-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/dm-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/dm-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --intonaco:#F3F2EE; --gesso:#FBFBF9; --ink:#15191C; --text:#2C3337;
  --pietra:#4D5A60; --scura:#1C2428; --rule:#D6D7D2; --muted:#5F676B;
  --on-dark:#9AA7AD; --paper:#F3F2EE; --desk:#E4E3DE;
  --display:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --serif:'Source Serif 4','Iowan Old Style',Georgia,serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--intonaco);color:var(--text);font:400 18px/1.62 var(--serif);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.defs{position:absolute}
.skip{position:absolute;left:-999px;top:0;padding:10px 14px;background:var(--paper);color:var(--ink);font:400 12px/1 var(--mono);z-index:5}
.skip:focus{left:12px;top:12px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- wordmark */
.wordmark{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.wordmark span{display:flex;flex-direction:column;gap:6px}
.wordmark b{font:500 19px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.wordmark i{font:400 9px/1 var(--mono);letter-spacing:.46em;text-transform:uppercase;font-style:normal;opacity:.7}

/* ---------- the dark room */
.hero{position:relative;background:var(--scura);color:var(--paper);min-height:min(100svh,920px);display:flex;overflow:hidden}
.hero .grid{position:absolute;inset:0;width:100%;height:100%}
.hero .grid g{opacity:.13}
.hero .grid .vp{opacity:.5}
.hero .grid line{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.6s cubic-bezier(.2,.6,.2,1) .15s backwards}
.hero .grid .horizon{animation-duration:1.1s;animation-delay:0s}
.hero .grid .room{animation:fade 1.2s ease 1.1s backwards}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
.hero-in{position:relative;flex:1;display:flex;flex-direction:column;width:100%;padding-block:clamp(24px,4vw,44px) clamp(20px,3vw,34px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:24px}
nav{display:flex;gap:clamp(16px,2.4vw,34px);font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
nav a{color:var(--on-dark);text-decoration:none;padding-block:8px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a:focus-visible{color:var(--paper);border-bottom-color:rgba(243,242,238,.5)}
.pitch{margin-top:auto;padding-top:clamp(120px,24vh,300px);max-width:980px}
.eyebrow{margin:0;font:400 11px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--on-dark)}
h1{margin:26px 0 0;font:400 clamp(44px,7.4vw,104px)/.98 var(--display);letter-spacing:-.014em;text-wrap:balance}
h1 em{display:block;font-style:italic;color:#C9D1D4}
.lede{margin:clamp(20px,2.6vw,30px) 0 0;max-width:34em;font:italic 400 clamp(18px,1.9vw,23px)/1.4 var(--serif);color:#C9D1D4}
.hero-foot{margin-top:clamp(44px,7vh,88px);padding-top:18px;border-top:1px solid rgba(243,242,238,.26);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 10.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark)}

/* ---------- sections: a folio in the margin, the text beside it */
.sec{padding-block:clamp(64px,9vw,124px) 0}
.sec:last-of-type{padding-bottom:clamp(64px,9vw,124px)}
.cols{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3fr);gap:clamp(24px,5vw,72px)}
.cols::before{content:"";grid-column:1/-1;height:1px;background:var(--rule);margin-bottom:clamp(4px,1.4vw,18px)}
.folio{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:28px}
.folio b{font:400 clamp(40px,4.6vw,58px)/.9 var(--display);color:var(--pietra)}
.folio span{font:400 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--pietra)}
.body{max-width:41em}
h2{margin:0 0 .7em;font:400 clamp(32px,4.2vw,52px)/1.06 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.body p{margin:0 0 1.05em}
.body p:last-child{margin-bottom:0}
.cap{font:400 11.5px/1.6 var(--mono);letter-spacing:.02em;color:var(--muted)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);margin:clamp(36px,5vw,56px) 0 14px;padding-top:22px;border-top:1px solid var(--rule)}
.figures dt{font:400 clamp(34px,4.6vw,56px)/1 var(--display);letter-spacing:-.012em;color:var(--ink)}
.figures dd{margin:0;font:400 10.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.figures div{display:flex;flex-direction:column;gap:10px}

/* ---------- the brief: two sheets on the table, the index beside them */
.brief{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.sheets{margin:0}
.desk{position:relative;background:var(--desk);padding:clamp(22px,4vw,48px);aspect-ratio:1/1.12;overflow:hidden}
.sheet{position:absolute;width:66%;height:auto;background:var(--gesso);box-shadow:0 1px 2px rgba(21,25,28,.14),0 16px 36px rgba(21,25,28,.18)}
.sheet.back{right:6%;top:6%}
.sheet.front{left:6%;bottom:-16%}
.sheets figcaption{margin-top:14px;font:400 11.5px/1.6 var(--mono);letter-spacing:.02em;color:var(--muted)}
.index h3,.rules h3{margin:0}
.index h3{font:400 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--pietra);padding-bottom:16px;border-bottom:1px solid var(--rule)}
.index ol{list-style:none;margin:0;padding:0}
.index li{display:grid;grid-template-columns:3.2em 1fr;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
.index li b{font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--pietra)}
.index li strong{font-weight:600;color:var(--ink);margin-right:.5em}
.index li span{color:var(--muted)}
.terms{margin:26px 0 0;display:grid;gap:10px}
.terms div{display:grid;grid-template-columns:7.5em 1fr;gap:8px;align-items:baseline}
.terms dt{font:400 10.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pietra)}
.terms dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink)}

/* ---------- method */
.rules{list-style:none;margin:clamp(36px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,56px)}
.rules li{padding:22px 0 30px;border-top:1px solid var(--ink)}
.rules b{display:block;font:400 11px/1 var(--mono);letter-spacing:.16em;color:var(--pietra)}
.rules h3{margin:16px 0 8px;font:400 25px/1.15 var(--display);color:var(--ink)}
.rules p{margin:0;font-size:16px;line-height:1.56}
.coda{margin:clamp(20px,3vw,36px) 0 0;padding-top:26px;border-top:1px solid var(--rule);font:italic 400 clamp(20px,2.3vw,26px)/1.35 var(--serif);color:var(--ink)}

/* ---------- close */
.close{background:var(--scura);color:var(--paper);padding-block:clamp(56px,8vw,96px) 30px}
.close .arr{margin:clamp(30px,4vw,44px) 0 0;font:400 clamp(28px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.008em;max-width:18em}
.close .mail{margin:18px 0 0;font:400 13px/1.4 var(--mono);letter-spacing:.08em}
.close .mail a{color:var(--paper);text-underline-offset:5px}
.fine{margin-top:clamp(56px,8vw,96px);padding-top:18px;border-top:1px solid rgba(243,242,238,.22);display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;font:400 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}

/* ---------- small screens */
@media (max-width:900px){
  .brief{grid-template-columns:1fr}
  .rules{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:17px}
  nav{display:none}
  .cols{grid-template-columns:1fr;gap:22px}
  .folio{position:static;flex-direction:row;align-items:baseline;gap:14px}
  .folio b{font-size:34px}
  .figures{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr}
  .desk{aspect-ratio:1/1.2}
  .sheet{width:72%}
  .sheet.back{right:4%;top:5%}
  .sheet.front{left:4%;bottom:-18%}
  .terms div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .grid line,.hero .grid .room{animation:none}
}
@media print{
  .hero{min-height:0}
  .hero .grid,nav{display:none}
}