/* Pure Maroc B.V. — static catalogue (no shop functions)
   Concept 1 "Gallery". Fonts: Cardo (SIL OFL 1.1), self-hosted. Sans = system stack. */
@font-face{font-family:"Cardo";src:url("/assets/fonts/cardo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cardo";src:url("/assets/fonts/cardo-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --paper:#f3eee5;      /* warm off-white wall */
  --plate:#ffffff;      /* photos carry a white ground: shown as white mounts */
  --ink:#1c1915;
  --muted:#5d554b;      /* 6.3:1 on paper, 5.6:1 on tint */
  --line:#d6ccbc;
  --accent:#8a3a20;     /* focus + hover only; echoes live #973C20; 6.7:1 on paper */
  --tint:#e9e2d5;
  --serif:"Cardo","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gut:clamp(1rem,4vw,3rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
::selection{background:#e2d3bb}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:1rem;z-index:10;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-size:.9rem;text-decoration:none}
.skip:focus{left:1rem}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}

/* header: wordmark + nav on one line, also on phones */
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1.4rem}
.site--home .bar{justify-content:flex-end}
.site nav ul{display:flex;gap:clamp(1rem,3vw,2.75rem);list-style:none;margin:0;padding:0}
.site nav a{display:inline-block;padding-block:.55rem;font:500 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-underline-offset:.5em;text-decoration-thickness:1px}
.site nav a:hover{color:var(--accent)}
.site nav a[aria-current]{text-decoration-line:underline}
.wm{font:400 1.45rem/1 var(--serif);letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.wm .bv{color:var(--muted);letter-spacing:.04em}
a.wm:hover .bv{color:var(--accent)}

/* plates: white mount around each photo */
.card{display:block;text-decoration:none}
.plate{display:block;background:var(--plate);padding:7%;overflow:hidden}
.plate img{display:block;width:100%;aspect-ratio:1/1}
.label{display:block;margin-top:1.05rem;max-width:30ch}
.label .t{text-wrap:pretty;display:block;font:400 1.22rem/1.24 var(--serif)}
.label .d{display:block;margin-top:.4rem;color:var(--muted);font:500 .78rem/1.4 var(--sans);letter-spacing:.05em}
.card:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.card:focus-visible{outline-offset:8px}
@media (prefers-reduced-motion:no-preference){
  .plate img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .card:hover .plate img{transform:scale(1.03)}
}

/* home: cover line + the live wall (4 topicals, 5 oils) */
.cover{padding-block:clamp(.5rem,3vw,2.5rem) clamp(2.5rem,6vw,5rem)}
.wm-hero{margin:0;font:400 clamp(3.4rem,9.4vw,8.75rem)/.88 var(--serif);letter-spacing:-.025em}
.wm-hero span{display:inline-block;margin-right:.18em}
.wm-hero .bv{color:var(--muted);letter-spacing:.01em}
.wall{list-style:none;margin-block:0;padding-block:0;display:grid;column-gap:clamp(1rem,2.8vw,2.5rem)}
.wall--4{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:clamp(4.5rem,9vw,8rem)}
.wall--4 li:nth-child(2n){transform:translateY(clamp(1.5rem,4vw,3.5rem))}
.wall--5{grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:clamp(5rem,10vw,9rem);background:linear-gradient(var(--line),var(--line)) top/calc(100% - 2*var(--gut)) 1px no-repeat;padding-top:clamp(2.5rem,5vw,4rem)}

/* section label */
.sec{display:flex;margin:0 0 2.75rem;padding-top:1.1rem;border-top:1px solid var(--line);font:500 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* page heads */
.crumbs{padding-block:.25rem 2.25rem;color:var(--muted);font:400 .8rem/1.5 var(--sans);letter-spacing:.01em}
.crumbs a{text-underline-offset:.2em}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink)}
.ptitle{margin:0 0 clamp(2rem,5vw,3.5rem);font:400 clamp(2.4rem,5vw,4rem)/1.02 var(--serif);letter-spacing:-.015em}

/* shop index */
.shop{padding-bottom:clamp(6rem,12vw,11rem)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.5rem,4.5vw,4.5rem);row-gap:clamp(3.5rem,7vw,6rem)}
.grid li:nth-child(3n+2){transform:translateY(clamp(2rem,5.5vw,5rem))}

/* product page: photo stays in view while the text scrolls */
.pgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,5.5vw,5.5rem);align-items:start;padding-bottom:clamp(5rem,9vw,8rem)}
.pfig{margin:0;position:sticky;top:1.5rem}
.ptext{max-width:36rem;min-width:0}
.pname{text-wrap:balance;margin:0 0 1.6rem;font:400 clamp(2.1rem,3.5vw,3rem)/1.06 var(--serif);letter-spacing:-.012em}
.excerpt p{margin:0 0 1rem;font:400 1.24rem/1.5 var(--serif)}
.excerpt strong,.desc strong{font-family:var(--sans);font-weight:600;font-size:.8em;letter-spacing:.03em}
.meta{margin:2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);font:400 .9rem/1.7 var(--sans)}
.meta div{display:flex;flex-wrap:wrap;gap:0 .45rem}
.meta dt{color:var(--muted)}
.meta dd{margin:0}
.meta a{text-decoration-thickness:1px;text-underline-offset:.22em}
.meta a:hover{color:var(--accent)}
.desc{margin-top:clamp(3rem,6vw,4.5rem)}
.desc>.sec{margin-bottom:1.75rem}
.dtitle{text-wrap:balance;margin:0 0 1.2rem;font:400 clamp(1.45rem,2.2vw,1.8rem)/1.2 var(--serif);letter-spacing:-.005em}
.dtitle strong{font:inherit;letter-spacing:inherit}
.dtitle em{font-family:inherit;font-size:inherit;font-weight:inherit}
.desc p{margin:0 0 1rem;font:400 1.1rem/1.62 var(--serif)}
.desc ul{margin:0 0 1rem;padding-left:1.15rem;font:400 1.06rem/1.6 var(--serif)}
.desc li::marker{color:var(--muted)}
.desc hr{border:0;border-top:1px solid var(--line);margin:1.9rem 0}
.desc a{text-decoration-thickness:1px;text-underline-offset:.2em}
.desc a:hover{color:var(--accent)}
/* spec sheet: label/value rows between hairlines (text exactly as live) */
.spec{margin:1.9rem 0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:minmax(7.5rem,11rem) minmax(0,1fr);gap:.35rem 1.25rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
.spec dt{padding-top:.28rem;color:var(--muted);font:600 .74rem/1.45 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.spec dd{margin:0}
.spec dd p,.spec dd ul{margin:0 0 .3rem;font-size:1.05rem;line-height:1.55}
.spec dd>:last-child{margin-bottom:0}
.band{margin:2.25rem 0 0;padding:1rem 1.25rem;background:var(--tint);border-block:1px solid var(--line);text-align:center}
.desc .band p{margin:0;font:600 .76rem/1.6 var(--sans);letter-spacing:.12em}
.desc .band strong{font-size:inherit;letter-spacing:inherit}

/* text pages */
.prose{max-width:44rem;padding-bottom:clamp(5rem,10vw,8rem)}
.prose p,.prose li{font:400 1.12rem/1.65 var(--serif)}
.prose p{margin:0 0 1.05rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.prose li::marker{color:var(--muted)}
.prose ol>li::marker{font-family:var(--sans);font-size:.85em;font-weight:600}
.prose ol>li>strong:only-child{font-weight:600}
.prose strong{font-weight:700}
.prose a{text-decoration-thickness:1px;text-underline-offset:.2em}
.prose a:hover{color:var(--accent)}
.prose .lead-in{margin-top:2rem;font:600 .78rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legal p,.legal li{font-size:1.04rem}

/* footer */
.foot{border-top:1px solid var(--line);padding-top:3.5rem;font:400 .9rem/1.6 var(--sans)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.fwm{margin:0}
.fcol h2{margin:0 0 .9rem;color:var(--muted);font:500 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol a{display:inline-block;padding-block:.28rem;text-decoration:none}
.fcol a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.bottom{margin:3.5rem auto 0;padding-block:1.6rem 2.4rem;color:var(--muted);font-size:.78rem;line-height:1.6;background:linear-gradient(var(--line),var(--line)) top/calc(100% - 2*var(--gut)) 1px no-repeat}
.bottom strong{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* tablet */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid li:nth-child(3n+2){transform:none}
  .grid li:nth-child(2n){transform:translateY(clamp(2rem,6vw,3.5rem))}
  .wall--5{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:2.5rem}
  .wall--5 li{grid-column:span 2}
  .wall--5 li:nth-child(4){grid-column:2/span 2}
}
/* phone */
@media (max-width:720px){
  .bar{padding-block:1rem}
  .wm{font-size:1.15rem}
  .site nav ul{gap:.95rem}
  .site nav a{font-size:.72rem;letter-spacing:.1em}
  .wall--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem;padding-bottom:4rem}
  .wall--4 li:nth-child(2n){transform:translateY(1.25rem)}
  .wall--5{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem}
  .wall--5 li,.wall--5 li:nth-child(4){grid-column:auto}
  .wall--5 li:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - .5rem)}
  .grid{column-gap:1rem;row-gap:2.5rem}
  .grid li:nth-child(2n){transform:translateY(1.5rem)}
  .label{margin-top:.7rem}
  .label .t{font-size:1.02rem}
  .label .d{font-size:.72rem;letter-spacing:.03em}
  .pgrid{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .pfig{position:static}
  .crumbs{padding-bottom:1.5rem}
  .spec>div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .spec dt{padding-top:0}
  .fgrid{grid-template-columns:1fr 1fr;row-gap:2.25rem}
  .fwm{grid-column:1/-1}
}
/* very narrow: one column, nav may wrap under the wordmark */
@media (max-width:340px){
  .bar{flex-wrap:wrap}
  .grid{grid-template-columns:minmax(0,1fr)}
  .grid li:nth-child(n){transform:none}
}