@import "../fonts/fonts.css";

/* ============================================================
   Laboratorio della Pasta — vintage pastificio label
   ============================================================ */
:root{
  color-scheme: light;
  --paper:#E6DBBE; --paper-lite:#F1E8CF; --paper-deep:#DBCDA6;
  --ink:#2A2013; --ink-soft:#5a4a30; --red:#8A2A22; --green:#23422F;
  --gold:#A87C2C; --rule:#3a2c17; --grain:.05; --shadow:rgba(42,32,19,.22); --scrim:241,232,207;
}
:root[data-theme="dark"], html.dark{
  color-scheme: dark;
  --paper:#17110A; --paper-lite:#211a10; --paper-deep:#0f0b06;
  --ink:#ECDFC1; --ink-soft:#b7a684; --red:#CA5040; --green:#7FA98A;
  --gold:#CFA858; --rule:#6b5730; --grain:.08; --shadow:rgba(0,0,0,.5); --scrim:33,26,16;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#17110A; --paper-lite:#211a10; --paper-deep:#0f0b06;
    --ink:#ECDFC1; --ink-soft:#b7a684; --red:#CA5040; --green:#7FA98A;
    --gold:#CFA858; --rule:#6b5730; --grain:.08; --shadow:rgba(0,0,0,.5); --scrim:33,26,16;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}

body{
  margin:0;background:var(--paper-lite);color:var(--ink);
  font-family:"Spectral",Palatino,Georgia,serif;
  font-size:clamp(16px,1.05vw + 13px,19px);line-height:1.6;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before, html.dark body::before{mix-blend-mode:screen}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen}}

h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;margin:0;text-wrap:balance;letter-spacing:.005em}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:italic}

.stamp{font-family:"Courier Prime","Courier New",monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.7rem}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#F1E8CF;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---- page frame ---- */
.sheet{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,30px) clamp(16px,4vw,40px) clamp(30px,6vw,60px)}
.frame{background:transparent;padding:0}

/* ---- masthead ---- */
.masthead{text-align:center;display:flex;flex-direction:column;align-items:center}
.tricolore{display:flex;height:6px;width:170px;border:1px solid var(--rule);margin-bottom:1.2rem}
.tricolore span{flex:1}
.tricolore span:nth-child(1){background:var(--green)}
.tricolore span:nth-child(2){background:var(--paper-lite)}
.tricolore span:nth-child(3){background:var(--red)}
.eyebrow{color:var(--red)}
.brand-logo{margin:.2rem auto .35rem;max-width:min(120px,38%)}
.brand-logo img{width:100%;height:auto;display:block}
:root[data-theme="dark"] .brand-logo img,html.dark .brand-logo img{background:#F1E8CF;border-radius:50%;padding:.55rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-logo img{background:#F1E8CF;border-radius:50%;padding:.55rem}}
.brand{font-size:clamp(2.5rem,8vw,5rem);line-height:.9;margin:.5rem 0 .1rem}
.brand .della{display:block;font-style:italic;color:var(--green);font-size:.4em;margin-top:.16em}
.undertitle{display:flex;align-items:center;gap:1rem;color:var(--ink-soft);margin-top:.45rem}
.undertitle::before,.undertitle::after{content:"";height:1px;width:clamp(20px,8vw,64px);background:var(--rule);opacity:.6}

nav.main{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.8rem,3vw,2rem);
  margin-top:1.8rem;padding:.85rem 0;width:100%}
nav.main a{font-family:"Spectral",Georgia,serif;font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;position:relative;padding:.15rem 0}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--red);transition:right .22s ease}
nav.main a:hover::after,nav.main a:focus-visible::after{right:0}
/* tricolore separation lines, top & bottom of the menu bar */
nav.main::before,nav.main::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#1e7a41 0 33.33%,#f7f1e2 33.33% 66.66%,#c0392b 66.66% 100%);
  box-shadow:0 1px 3px -1px rgba(0,0,0,.18)}
nav.main::before{top:0}
nav.main::after{bottom:0}

/* ---- dividers ---- */
.divider{display:flex;align-items:center;justify-content:center;gap:0;color:var(--gold);margin:clamp(2.2rem,5vw,3.2rem) 0}
.divider::before,.divider::after{content:"";height:1px;flex:1;max-width:200px;opacity:.7;background:linear-gradient(90deg,transparent,var(--rule))}
.divider::after{background:linear-gradient(270deg,transparent,var(--rule))}
.divider b{font-size:1.05rem;letter-spacing:.3em}

section{margin-top:clamp(2.4rem,6vw,3.4rem);scroll-margin-top:1.5rem}
.section-head{text-align:center;margin-bottom:2rem}
.section-head .kicker{color:var(--red);display:block;margin-bottom:.6rem}
.section-head h2{font-size:clamp(1.7rem,4.5vw,2.6rem)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;margin-top:2.2rem}

/* lead hero: faded photographic backdrop printed on the paper */
/* full-bleed photographic hero, edge to edge */
.hero--lead{position:relative;isolation:isolate;display:flex;align-items:center;
  width:100vw;left:50%;margin:0 0 0 -50vw;min-height:clamp(440px,72vh,700px)}
.hero--lead::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../images/range.jpg") center/cover;filter:sepia(.18) saturate(.94)}
.hero--lead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, var(--paper-lite) 0%, rgba(var(--scrim),0) 18%, rgba(var(--scrim),0) 80%, var(--paper-lite) 100%),
    linear-gradient(90deg, rgba(var(--scrim),.9) 0%, rgba(var(--scrim),.56) 34%, rgba(var(--scrim),.2) 62%, rgba(var(--scrim),0) 100%)}
.hero-copy{position:relative;width:100%;max-width:1120px;margin:0 auto;
  padding:clamp(2rem,6vw,3.4rem) clamp(20px,5vw,48px)}
.hero-copy>*{max-width:38rem}
.hero .kicker{color:var(--red);margin-bottom:1rem}
.hero h2{font-size:clamp(2rem,5vw,3.1rem);line-height:1.05}
.hero .sub{font-size:clamp(1.05rem,2vw,1.25rem);margin:1.2rem 0 1.6rem;color:var(--ink-soft)}
.badges{display:flex;align-items:center;gap:1.2rem;margin-top:1.8rem;flex-wrap:wrap}
.seal{width:104px;height:104px;border-radius:50%;flex:none;border:2px solid var(--red);color:var(--red);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-8deg);
  box-shadow:inset 0 0 0 4px var(--paper-lite),inset 0 0 0 5px var(--red);font-family:"Courier Prime",monospace}
.seal .big{font-size:1.35rem;letter-spacing:.05em;line-height:1}
.seal .sm{font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.25rem}
.badges .note{color:var(--ink-soft);line-height:1.8}

/* framed photo */
.plate{position:relative;border:1px solid var(--rule);aspect-ratio:4/5;overflow:hidden;background:#2c1e10;
  box-shadow:0 18px 40px -26px var(--shadow)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.plate .warm{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(160deg,#8a2a2214,transparent 40%),linear-gradient(0deg,#2a201340,transparent 45%)}
.plate::after{content:"";position:absolute;inset:9px;border:1px solid #e9dcbb55;pointer-events:none;z-index:3}
.plate .cap{position:relative;z-index:4;margin-bottom:16px;background:var(--paper-lite);color:var(--ink);
  border:1px solid var(--rule);padding:.45rem 1rem}

/* ---- buttons ---- */
.btns{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{display:inline-block;text-decoration:none;padding:.8rem 1.5rem;border:1.5px solid var(--rule);
  font-family:"Courier Prime",monospace;text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;
  transition:transform .12s ease,background .12s ease;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,#a5382c 0%,#8A2A22 58%,#75201a 100%);color:#F6ECD4;border-color:#6c1c15;
  box-shadow:inset 0 1px 0 rgba(255,222,180,.28), 0 7px 18px -9px rgba(138,42,34,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,222,180,.34), 0 12px 24px -9px rgba(138,42,34,.72)}
.btn-ghost{background:transparent;color:inherit}
.btn-ghost:hover{background:var(--paper-deep)}

/* ---- range / listino with engravings ---- */
.range{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,1.8rem)}
.cat{border:1px solid var(--rule);padding:1.3rem 1.5rem;background:var(--paper)}
.cat h3{font-size:1.4rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.2rem}
.cat h3 .en{font-family:"Courier Prime",monospace;font-size:.66rem;color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
.cat .rule{height:1px;background:var(--rule);opacity:.45;margin:.7rem 0 .4rem}
.cat ul{list-style:none;margin:0;padding:0}
.cat li{display:flex;align-items:center;gap:.85rem;padding:.5rem 0;border-bottom:1px dotted var(--rule)}
.cat li:last-child{border-bottom:0}
.cat li .name{flex:1}
.cat li .desc{font-style:italic;color:var(--ink-soft);font-size:.85em}
.ico{width:30px;height:30px;flex:none;color:var(--red);overflow:visible;transition:color .18s ease}
.ico>*{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* --- living engravings: ink-in on scroll + shape-specific hover motion --- */
@media (prefers-reduced-motion: no-preference){
  html.js-draw .cat .ico>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease}
  html.js-draw .cat li:nth-child(2) .ico>*{transition-delay:.09s}
  html.js-draw .cat li:nth-child(3) .ico>*{transition-delay:.18s}
  html.js-draw .cat.drawn .ico>*{stroke-dashoffset:0}

  .cat li:hover .ico{color:var(--green)}
  .cat li:hover .ico.spin{animation:ec-spin 1.1s linear infinite}
  .cat li:hover .ico.turn{animation:ec-turn .7s ease}
  .cat li:hover .ico.press{animation:ec-press .5s ease}
  .cat li:hover .ico.bob{animation:ec-bob .6s ease}
}
@keyframes ec-spin{to{transform:rotate(1turn)}}
@keyframes ec-turn{from{transform:rotate(0)}to{transform:rotate(1turn)}}
@keyframes ec-press{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.8)}}
@keyframes ec-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cat li{transition:background .15s ease}
.cat li:hover{background:rgba(168,124,44,.10)}
.cat li:hover .name{color:var(--red)}

/* ---- bespoke ---- */
.bespoke-list{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.5rem}
.bespoke-list li{padding-left:1.4rem;position:relative}
.bespoke-list li::before{content:"\2014";position:absolute;left:0;color:var(--gold)}

/* ---- ordering facts ---- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,1.6rem)}
.fact{text-align:center;padding:1.6rem 1rem;border:1px solid var(--rule);background:var(--paper)}
.fact .stamp{color:var(--red);display:block;margin-bottom:.5rem}
.fact .num{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(175deg,#efce80 0%,#c79a3e 42%,#9c6f22 54%,#e6c06a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.fact .lab{margin-top:.5rem;color:var(--ink-soft);font-size:.95rem}

/* ---- about ---- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.about p{margin-top:1.1rem;color:var(--ink-soft)}
.about .plate{aspect-ratio:5/4}
.about-copy{max-width:62ch;margin:0 auto;text-align:center;color:var(--ink-soft)}
.about-copy p{margin-top:1rem}
.about-copy p:first-child{margin-top:0}

/* ---- catalogue CTA under the range ---- */
.range-more{text-align:center;margin-top:clamp(1.6rem,4vw,2.4rem)}

/* ---- why us ---- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,3.2vw,2.2rem)}
.why-item{border-top:1px solid var(--rule);padding-top:.9rem}
.why-item .n{font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.16em;color:var(--gold)}
.why-item h3{font-size:1.28rem;margin:.45rem 0 .5rem}
.why-item p{color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:760px){.why{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why{grid-template-columns:1fr}}

/* ---- image reels (gallery) ---- */
.reels-head{text-align:center}
.reels-head h2{font-size:clamp(1.7rem,4.5vw,2.6rem)}
.reels-head p{color:var(--ink-soft);margin-top:.5rem}
.reels{overflow:hidden;padding:clamp(1.2rem,3vw,1.8rem) 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.reels-track{display:flex;width:max-content;animation:reel-roll 64s linear infinite}
.reels:hover .reels-track,.reels:focus-within .reels-track{animation-play-state:paused}
@keyframes reel-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel{position:relative;flex:0 0 auto;width:min(230px,62vw);aspect-ratio:9/16;border-radius:18px;overflow:hidden;
  margin-right:14px;background:#2c1e10;box-shadow:0 14px 32px -16px var(--shadow);border:1px solid var(--rule)}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.reel:hover img{transform:scale(1.04)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 70%,rgba(20,14,6,.22))}
@media (prefers-reduced-motion: reduce){.reels{overflow-x:auto} .reels-track{animation:none}}

/* ---- contact / form ---- */
.cta{border:2px solid var(--rule);background:var(--paper);padding:clamp(1.6rem,4vw,2.6rem);text-align:center}
.cta h2{font-size:clamp(1.8rem,4.5vw,2.7rem);margin-bottom:.5rem}
.cta .kicker{color:var(--red)}
.cta .lead{max-width:52ch;margin:.8rem auto 0;color:var(--ink-soft)}
form.quote{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:620px;margin:1.8rem auto 0;text-align:left}
form.quote .full{grid-column:1/-1}
label{display:block}
label .lbl{display:block;margin-bottom:.3rem;color:var(--ink-soft);font-family:"Courier Prime",monospace;
  text-transform:uppercase;letter-spacing:.11em;font-size:.66rem}
input,textarea{width:100%;padding:.7rem .8rem;background:var(--paper-lite);border:1px solid var(--rule);color:var(--ink);
  font-family:inherit;font-size:1rem;border-radius:0}
input:focus,textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.formnote{grid-column:1/-1;text-align:center;color:var(--ink-soft);font-size:.8rem}

/* ---- FAQ ---- */
.faq{max-width:780px;margin:0 auto}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:1.05rem .2rem;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.05rem,2.2vw,1.28rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .q{color:var(--red)}
.faq summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.faq .q{transition:color .15s ease}
.faq .mk{flex:none;font-family:"Courier Prime",monospace;color:var(--red);font-size:1.1rem;line-height:1;transition:transform .2s ease}
.faq details[open] summary .mk{transform:rotate(45deg)}
.faq .ans{margin:0 .2rem;padding:0 0 1.15rem;color:var(--ink-soft);max-width:70ch}

/* ---- footer ---- */
footer{margin-top:clamp(2.6rem,6vw,3.4rem);border-top:1px solid var(--rule);padding-top:1.8rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem;color:var(--ink-soft)}
footer b{color:var(--ink)}
footer .col{max-width:26ch}
footer .col .stamp{color:var(--red);display:block;margin-bottom:.5rem}
.colophon{text-align:center;color:var(--ink-soft);margin-top:2rem}
.credit{text-align:center;color:var(--ink-soft);margin-top:.5rem;font-size:.66rem;opacity:.8}
.credit a{color:var(--gold);text-decoration:none}
.credit a:hover{text-decoration:underline}
/* wordmark logo bookend above the footer */
.footer-mark{text-align:center;margin-top:clamp(2.2rem,5vw,3.2rem)}
.footer-mark img{width:min(280px,64%);height:auto;margin:0 auto;display:block}

/* ---- thank-you page ---- */
.thanks{text-align:center;max-width:54ch;margin:clamp(3rem,11vw,7rem) auto;padding:0 clamp(16px,4vw,40px)}
.thanks .seal{margin:0 auto 1.6rem;transform:rotate(-8deg)}
.thanks h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02}
.thanks p{color:var(--ink-soft);margin-top:1.1rem;font-size:1.08rem}
.thanks .btns{justify-content:center;margin-top:2rem}

/* ---- responsive ---- */
@media (max-width:760px){
  .hero,.about{grid-template-columns:1fr}
  .about .plate{order:-1}
  /* stronger veil so stacked hero text stays readable over the backdrop */
  .hero--lead::after{background:linear-gradient(180deg, var(--paper-lite), rgba(var(--scrim),.74) 22%, rgba(var(--scrim),.74) 78%, var(--paper-lite))}
}
@media (max-width:680px){
  .range{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  form.quote{grid-template-columns:1fr}
}