/* ============================================================
   IrNi Café the Breakfast Bar — styles.css
   Vanilla CSS, no framework, no build step.
   Layout & treatment modeled 1:1 on proudandpunch.com.au:
   centered logo nav (menu left / logo center / socials right),
   full-bleed alternating colour blocks, rounded bold-sans headlines
   (Fredoka), white pill CTAs, flat rounded images.
   Only IrNi branding kept (logo, name, café content).
   ============================================================ */

/* ---------- Self-hosted fonts (no Google CDN — GDPR) ----------
   Display: Fredoka (rounded, warm). Body: Bricolage Grotesque (distinctive,
   not the generic Inter/Roboto). Accents/quotes: Fraunces (soft serif). */
@font-face { font-family: "Fredoka"; src: url("images/fonts/Fredoka-var-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("images/fonts/Bricolage-var-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("images/fonts/Fraunces-var-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  /* warm saturated colour blocks (IrNi world, P&P energy) */
  --cream:#FBF3E2; --blush:#E4A48C; --ochre:#E7A94E; --terracotta:#A84E30; --umber-dk:#443A30;
  /* ink + brand accents (kept) */
  --charcoal:#3A322B; --ink:#2C2621; --gold:#AC8E52; --gold-lt:#E6D3A6; --bordeaux:#6B2737; --bordeaux-dk:#561F2C;
  --white:#FFFFFF;

  --font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --font-sans:"Bricolage","Segoe UI",system-ui,sans-serif;
  --font-serif:"Fraunces","Georgia",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --max-w:78rem; --measure:34rem;
  --r:22px; --r-sm:16px;
  --px:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4rem,9vw,7.5rem);
  --nav-h:5rem;
  --shadow:0 20px 50px -26px rgba(58,50,43,0.45);
  --shadow-pill:0 10px 26px -12px rgba(58,50,43,0.5);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;} *{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{overflow-x:clip;max-width:100%;}
body{min-height:100vh;}
img,picture,iframe,svg{display:block;max-width:100%;} img{height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;}
ul{list-style:none;padding:0;}
:where(h1,h2,h3){text-wrap:balance;} p{text-wrap:pretty;}

/* ---------- Base ---------- */
body{font-family:var(--font-sans);color:var(--charcoal);background:var(--cream);line-height:1.65;font-size:clamp(1rem,1rem + 0.2vw,1.125rem);-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1;letter-spacing:-0.01em;}
h1{font-size:clamp(2.9rem,8.5vw,6rem);}
h2{font-size:clamp(2.3rem,6vw,4.25rem);}
h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:600;}

:focus-visible{outline:3px solid var(--bordeaux);outline-offset:3px;border-radius:6px;}
.block--terracotta :focus-visible,.block--umber :focus-visible,.site-header[data-theme="terracotta"] :focus-visible,.site-header[data-theme="umber"] :focus-visible{outline-color:var(--gold-lt);}

.skip-link{position:absolute;left:0;top:0;transform:translateY(-140%);background:var(--bordeaux);color:#fff;padding:0.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;z-index:400;transition:transform 0.2s ease;}
.skip-link:focus{transform:translateY(0);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Thin dark strip at very top (P&P) */
.topstrip{position:fixed;inset:0 0 auto 0;height:6px;background:var(--umber-dk);z-index:300;}

/* ---------- Colour blocks ---------- */
.block{position:relative;padding-block:var(--section-y);background-image:radial-gradient(150% 88% at 50% -8%, rgba(255,255,255,0.07), transparent 55%), radial-gradient(120% 80% at 50% 108%, rgba(40,25,15,0.10), transparent 55%);}
.block--cream{background-color:var(--cream);color:var(--charcoal);}
.block--blush{background-color:var(--blush);color:var(--ink);}
.block--ochre{background-color:var(--ochre);color:var(--ink);}
.block--terracotta{background-color:var(--terracotta);color:var(--cream);}
.block--umber{background-color:var(--umber-dk);color:var(--cream);}
.wrap{width:min(100% - 2 * var(--px),var(--max-w));margin-inline:auto;}

/* ---------- Utilities ---------- */
.eyebrow{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--bordeaux);margin-bottom:0.6rem;}
.block--terracotta .eyebrow,.block--umber .eyebrow{color:var(--gold-lt);}
.block--ochre .eyebrow{color:var(--terracotta);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.95rem 2rem;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1;background:var(--bordeaux);color:var(--cream);box-shadow:var(--shadow-pill);transition:transform 0.18s ease,background-color 0.18s ease,color 0.18s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);background:var(--bordeaux-dk);}
.btn:active{transform:translateY(0);}
.btn--ink{background:var(--charcoal);color:var(--cream);}
.btn--ink:hover{background:var(--ink);}
/* On the dark umber band, invert to a light pill */
.block--umber .btn{background:var(--cream);color:var(--umber-dk);}
.block--umber .btn:hover{background:#fff;}

.tlink{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:inherit;border-bottom:2px solid currentColor;padding-bottom:2px;transition:opacity 0.2s ease,gap 0.2s ease;}
.tlink:hover{opacity:0.7;gap:0.65rem;}

.icon{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* Flat rounded image placeholders (swap real photos by filename) */
.ph{position:relative;display:grid;place-items:center;text-align:center;aspect-ratio:4/3;padding:1.5rem;border-radius:var(--r);color:var(--cream);background:linear-gradient(140deg,#B0966E,#6E5B47);overflow:hidden;box-shadow:var(--shadow);}
.ph--hero{aspect-ratio:3/4;} .ph--wide{aspect-ratio:16/11;} .ph--portrait{aspect-ratio:4/5;} .ph--square{aspect-ratio:1/1;}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(251,243,226,0.16),transparent 45%),radial-gradient(circle at 78% 82%,rgba(40,30,25,0.3),transparent 48%);}
.ph__label{position:relative;font-family:var(--font-display);font-weight:600;font-size:1.2rem;line-height:1.15;max-width:18ch;text-shadow:0 1px 3px rgba(40,30,25,0.5);}
.ph__tag{position:absolute;left:0.75rem;bottom:0.6rem;font-family:ui-monospace,Menlo,monospace;font-size:0.58rem;letter-spacing:0.04em;color:rgba(251,243,226,0.6);}
.zoomable{overflow:hidden;border-radius:var(--r);} .zoomable>.ph,.zoomable>img{transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);border-radius:0;box-shadow:none;}
.zoomable:hover>.ph,.zoomable:hover>img{transform:scale(1.05);}

/* Real photos (replace .ph placeholders); same slots as .ph */
.shot{display:block;width:100%;border-radius:var(--r);object-fit:cover;box-shadow:var(--shadow);background:#B0966E;}
.shot--portrait{aspect-ratio:3/4;} .shot--wide{aspect-ratio:16/11;} .shot--square{aspect-ratio:1/1;}
.hero__strip .shot{aspect-ratio:4/5;max-height:clamp(11rem,26vh,16rem);}

/* ============================================================
   Header / Nav — menu LEFT · logo CENTER · socials RIGHT
   ============================================================ */
.site-header{position:fixed;inset:6px 0 auto 0;z-index:200;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;min-height:var(--nav-h);padding:0.6rem var(--px);background:var(--cream);color:var(--charcoal);transition:background-color 0.4s ease,color 0.4s ease;}
.site-header[data-theme="cream"]{background:var(--cream);color:var(--charcoal);}
.site-header[data-theme="blush"]{background:var(--blush);color:var(--ink);}
.site-header[data-theme="ochre"]{background:var(--ochre);color:var(--ink);}
.site-header[data-theme="terracotta"]{background:var(--terracotta);color:var(--cream);}
.site-header[data-theme="umber"]{background:var(--umber-dk);color:var(--cream);}

.nav-left{justify-self:start;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);}
.nav-center{justify-self:center;}
.nav-right{justify-self:end;display:flex;align-items:center;gap:0.75rem;}
.nav__link{font-family:var(--font-display);font-weight:600;font-size:0.95rem;color:inherit;opacity:0.85;transition:opacity 0.2s ease;}
.nav__link:hover{opacity:1;}
.nav__links{display:none;align-items:center;gap:clamp(0.75rem,1.6vw,1.4rem);}
/* Compact reserve pill in the header (desktop only) */
.nav__cta{display:none;padding:0.6rem 1.2rem;font-size:0.92rem;box-shadow:none;}
.nav__cta:hover{transform:translateY(-1px);}
.site-header[data-theme="umber"] .nav__cta,.site-header[data-theme="terracotta"] .nav__cta{background:var(--cream);color:var(--umber-dk);}
.site-header[data-theme="umber"] .nav__cta:hover,.site-header[data-theme="terracotta"] .nav__cta:hover{background:#fff;}
.brand{display:inline-flex;align-items:center;justify-content:center;color:inherit;}
.brand__logo{width:3.4rem;height:3.4rem;border-radius:50%;box-shadow:0 6px 16px -8px rgba(40,30,25,0.5);}
.nav__social{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1.6px solid currentColor;color:inherit;opacity:0.85;transition:opacity 0.2s ease,background-color 0.2s ease;}
.nav__social:hover{opacity:1;background:rgba(255,255,255,0.14);}
.nav__toggle{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;color:inherit;justify-self:start;}

.mobile-menu{position:fixed;inset:calc(var(--nav-h) + 6px) 0 auto 0;z-index:190;display:grid;gap:0.15rem;padding:1rem var(--px) 1.5rem;background:var(--cream);color:var(--charcoal);box-shadow:var(--shadow);transform:translateY(-120%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);}
.mobile-menu.is-open{transform:translateY(0);}
.mobile-menu a{padding:0.7rem 0;font-family:var(--font-display);font-weight:600;font-size:1.1rem;border-bottom:1px solid rgba(58,50,43,0.14);}
.mobile-menu a:last-child{border-bottom:0;margin-top:0.75rem;}

@media (min-width:1024px){
  .nav__links{display:flex;}
  .nav__toggle{display:none;}
  .nav__cta{display:inline-flex;}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem)) var(--px) clamp(3rem,6vw,5rem);}
.hero__inner{max-width:46rem;margin-inline:auto;}
.hero__kicker{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:0.01em;color:var(--terracotta);margin-bottom:0.7rem;}
.hero h1{color:var(--terracotta);}
.hero__sub{color:var(--charcoal);}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.03;margin-bottom:0;}
.hero__sub{margin:1.1rem auto 0;max-width:34rem;font-size:clamp(1.05rem,1.6vw,1.25rem);opacity:0.92;}
.hero__cta{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;justify-content:center;margin-top:1.6rem;}
.hero__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.75rem,2vw,1.25rem);width:min(100% - 2 * var(--px),46rem);margin:clamp(1.75rem,4vw,2.75rem) auto 0;}

/* ============================================================
   Values — editorial hairline list (no cards / no icons)
   ============================================================ */
.values{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;}
.values__lead h2 span{display:block;}
.values__lead p{margin-top:1.25rem;max-width:26rem;opacity:0.9;}
.values__lead .btn{margin-top:1.75rem;}
.values__list{display:grid;}
.vrow{display:grid;grid-template-columns:2.5rem 1fr;gap:0 1rem;align-items:baseline;padding:1.15rem 0;border-top:1px solid rgba(168,78,48,0.25);}
.vrow:last-child{border-bottom:1px solid rgba(168,78,48,0.25);}
.vrow__no{font-family:var(--font-serif);font-size:1.05rem;color:var(--terracotta);}
.vrow h3{grid-column:2;margin-bottom:0.15rem;}
.vrow p{grid-column:2;font-size:0.95rem;opacity:0.82;max-width:34rem;}
@media (min-width:900px){ .values{grid-template-columns:1fr 1.15fr;} }

/* ============================================================
   Feature blocks (image one side, text other, alternating)
   ============================================================ */
.feature{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.feature__text{max-width:var(--measure);}
.feature__text p{margin-top:1.1rem;opacity:0.92;}
.feature__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:1.9rem;}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.5rem;}
.chip{font-family:var(--font-display);font-weight:600;font-size:0.85rem;padding:0.4rem 1rem;border-radius:999px;border:1.6px solid currentColor;opacity:0.85;}
@media (min-width:900px){
  .feature{grid-template-columns:1fr 1fr;}
  .feature--reverse .feature__media{order:2;}
}

/* Story name */
.story__name{display:inline-block;margin-top:1.5rem;font-family:var(--font-display);font-weight:600;font-size:1.3rem;}

/* ============================================================
   Instagram (centered headline + 4 photos + follow)
   ============================================================ */
.center{text-align:center;} .center .head__sub{margin-inline:auto;}
.head__sub{margin-top:1rem;max-width:40rem;opacity:0.9;}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(0.75rem,1.8vw,1.25rem);margin-top:clamp(2rem,4vw,3rem);}
@media (min-width:800px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
.ig-cta{text-align:center;margin-top:clamp(1.75rem,4vw,2.5rem);}

/* Slim trust line (replaces the stat wall) */
.trustline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.5rem 1.25rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.35rem);margin:0.5rem 0 clamp(2rem,5vw,3rem);}
.trustline strong{color:var(--terracotta);}
.trustline .dot{opacity:0.4;}
.trustline .stars{display:inline-flex;gap:0.1rem;color:var(--gold);}
.trustline .stars svg{width:1.15rem;height:1.15rem;fill:currentColor;}

/* ============================================================
   Reviews + stats
   ============================================================ */
.gbadge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1.1rem;background:var(--white);border-radius:999px;box-shadow:var(--shadow-pill);font-family:var(--font-display);font-weight:600;font-size:0.9rem;color:var(--charcoal);margin-bottom:1.25rem;}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,4vw,2.5rem);text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem);}
.stat__num{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,6vw,4rem);line-height:0.9;font-variant-numeric:tabular-nums;}
.stat__label{margin-top:0.5rem;font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;opacity:0.8;}
.stat__stars{display:inline-flex;gap:0.1rem;justify-content:center;margin-top:0.35rem;}
.stat__stars svg{width:1.1rem;height:1.1rem;fill:currentColor;stroke:none;}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr);}}
.voices{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.voice{position:relative;padding:1.75rem 1.6rem 1.5rem;border-radius:var(--r);background:rgba(255,255,255,0.4);}
.block--terracotta .voice,.block--umber .voice{background:rgba(251,243,226,0.1);}
.voice p{font-family:var(--font-serif);font-weight:500;font-size:1.15rem;line-height:1.45;}
.voice cite{display:block;margin-top:0.8rem;font-style:normal;font-size:0.85rem;opacity:0.8;font-family:var(--font-sans);}
.reviews__disclaimer{margin-top:1.5rem;font-size:0.8rem;opacity:0.8;max-width:42rem;}
@media (min-width:820px){.voices{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   Anfahrt & Kontakt
   ============================================================ */
.anfahrt__grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem);}
.contact{font-style:normal;display:grid;gap:1.4rem;align-content:start;}
.contact__row{display:flex;gap:0.85rem;align-items:flex-start;}
.contact__row .icon{margin-top:0.15rem;color:var(--terracotta);}
.contact__row a{color:var(--bordeaux);}
.contact__row a:hover{text-decoration:underline;text-underline-offset:3px;}
.contact__label{font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0.75;margin-bottom:0.15rem;font-weight:600;}
.hours{display:grid;gap:0.25rem;} .hours div{display:flex;justify-content:space-between;gap:1.5rem;max-width:22rem;}
.hours dt{opacity:0.85;} .hours .is-closed dt,.hours .is-closed dd{font-weight:700;}
.map iframe{width:100%;height:clamp(280px,42vh,440px);border:0;border-radius:var(--r);box-shadow:var(--shadow);}
@media (min-width:900px){.anfahrt__grid{grid-template-columns:1fr 1.1fr;}}

/* ============================================================
   Speisekarte — editorial hairline lists (no prices, no tiles)
   ============================================================ */
.head{max-width:46rem;}
.menu{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,5rem);margin-top:clamp(2rem,4vw,3rem);}
.menu__cat h3{color:var(--terracotta);margin-bottom:0.3rem;}
.menu__cat ul{display:grid;}
.menu__cat li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.1rem 0.7rem;padding:0.7rem 0;border-top:1px solid rgba(172,142,82,0.4);}
.menu__name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--charcoal);}
.menu__desc{font-size:0.9rem;opacity:0.72;}
@media (min-width:720px){.menu{grid-template-columns:1fr 1fr;}}

/* ============================================================
   Reservieren — honest CTA block (call / Instagram), no form
   ============================================================ */
.reserve{max-width:48rem;margin-inline:auto;}
.reserve__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:clamp(1.75rem,3.5vw,2.5rem);}
.reserve__hint{margin-top:1.25rem;font-size:0.9rem;opacity:0.78;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--umber-dk);color:var(--cream);padding:clamp(3rem,7vw,5rem) var(--px) 2rem;}
.footer__grid{width:min(100%,var(--max-w));margin-inline:auto;display:grid;gap:2.5rem;grid-template-columns:1fr;}
.footer__brand{display:grid;gap:1rem;max-width:24rem;justify-items:start;}
.footer__lockup{display:inline-flex;align-items:center;gap:0.85rem;color:var(--cream);}
.footer__wordmark{display:flex;flex-direction:column;gap:0.12rem;font-family:var(--font-serif);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;opacity:0.82;line-height:1;}
.footer__wordmark strong{font-family:var(--font-display);font-weight:600;font-size:1.7rem;letter-spacing:-0.01em;text-transform:none;opacity:1;}
.footer__note{font-size:0.92rem;opacity:0.85;}
.footer__socials{display:flex;gap:0.75rem;}
.footer__social{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(251,243,226,0.28);color:var(--cream);transition:border-color 0.2s ease,background-color 0.2s ease;}
.footer__social:hover{border-color:var(--gold-lt);background:rgba(251,243,226,0.06);}
.footer__col h3{font-family:var(--font-sans);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-lt);font-weight:600;margin-bottom:1rem;}
.footer__col ul{display:grid;gap:0.55rem;} .footer__col a,.footer__col p{font-size:0.92rem;opacity:0.85;}
.footer__col a:hover{opacity:1;}
.footer__bottom{width:min(100%,var(--max-w));margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(251,243,226,0.16);display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;justify-content:space-between;align-items:center;font-size:0.85rem;opacity:0.85;}
.footer__links{display:flex;gap:1.25rem;} .footer__links a:hover{text-decoration:underline;text-underline-offset:3px;}
@media (min-width:720px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr;}}

/* ============================================================
   Subpage (Impressum)
   ============================================================ */
.subpage{padding:calc(var(--nav-h) + 3rem) var(--px) var(--section-y);}
.subpage__inner{width:min(100%,48rem);margin-inline:auto;}
.subpage h1{font-size:clamp(2.4rem,6vw,3.5rem);margin-bottom:2rem;}
.subpage h2{font-size:1.35rem;margin:2rem 0 0.5rem;}
.subpage a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:2px;}
.subpage .todo{color:var(--bordeaux);font-weight:600;}
.subpage__hint{font-size:0.9rem;opacity:0.8;margin-top:0.5rem;}
.subpage__back{display:inline-flex;gap:0.4rem;margin-top:2.5rem;color:var(--bordeaux);font-weight:600;}

/* ============================================================
   De-AI craft: grain · hand-drawn signature · pinned photos
   ============================================================ */
:root{--shadow-warm:0 24px 48px -22px rgba(120,55,25,0.5);}

/* Film grain over the page (below the fixed nav) — kills the flat AI look */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;background-image:var(--grain);background-size:150px 150px;opacity:0.07;mix-blend-mode:overlay;}

/* Signature: hand-drawn ink underline that draws in on reveal */
.ink-underline{display:block;width:min(9rem,55%);height:0.7rem;margin-top:0.55rem;color:var(--bordeaux);overflow:visible;}
.block--terracotta .ink-underline,.block--umber .ink-underline{color:var(--gold-lt);}
.center .ink-underline{margin-inline:auto;}
.ink-underline path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:280;stroke-dashoffset:280;transition:stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1) 0.15s;}
.is-visible .ink-underline path,.ink-underline.is-visible path{stroke-dashoffset:0;}

/* Signature: hand-drawn wavy divider that overlaps between blocks */
.divider-hand{display:block;position:relative;z-index:2;width:min(100% - 2*var(--px),var(--max-w));height:clamp(1.5rem,4vw,2.75rem);margin:calc(var(--section-y) * -0.5) auto;color:var(--gold);opacity:0.6;}
.divider-hand path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;}

/* Pinned / hand-placed photos: slight tilt, warm shadow, straighten on hover */
.hero__strip .shot,.ig-grid .shot{box-shadow:var(--shadow-warm);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s ease;}
.hero__strip .shot:nth-child(1){transform:rotate(-2.5deg);}
.hero__strip .shot:nth-child(2){transform:rotate(1.5deg) translateY(-0.6rem);}
.hero__strip .shot:nth-child(3){transform:rotate(2.5deg);}
.ig-grid li:nth-child(1) .shot{transform:rotate(-1.8deg);}
.ig-grid li:nth-child(2) .shot{transform:rotate(1.6deg);}
.ig-grid li:nth-child(3) .shot{transform:rotate(-1.4deg);}
.ig-grid li:nth-child(4) .shot{transform:rotate(2deg);}
.ig-grid li:nth-child(even){margin-top:clamp(0.75rem,2.5vw,1.75rem);}
.hero__strip .shot:hover,.ig-grid .shot:hover{transform:rotate(0) translateY(-5px);box-shadow:0 32px 58px -22px rgba(120,55,25,0.6);}

/* ============================================================
   Reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none;}
[data-delay="1"]{transition-delay:0.1s;} [data-delay="2"]{transition-delay:0.2s;} [data-delay="3"]{transition-delay:0.3s;} [data-delay="4"]{transition-delay:0.4s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none;}
  .ink-underline path{stroke-dashoffset:0;transition:none;}
  .btn:hover,.zoomable:hover>.ph,.zoomable:hover>img,.hero__strip .shot:hover,.ig-grid .shot:hover{transform:none;}
  .site-header{transition:none;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}