/* tactus studio · website · "Atelier krem"
   Layout: editorial grid on ivory paper; hairline rules divide panels; photos sit in gold double-rule frames like a nikah certificate. */
:root{
  /* palette: overrides the invitation tokens from stil.css on website pages */
  --paper:#f6f1e9;       /* ground */
  --paper-2:#efe6d8;     /* panels */
  --ink:#1f1b18;         /* text, solid buttons, footer */
  --ink-soft:#6f655c;    /* secondary text */
  --gold:#a78852;        /* frames, numerals */
  --gold-text:#8a6d3b;   /* gold that passes contrast as text */
  --rule:#d9cdbb;        /* hairlines */
  --blush:var(--paper); --blush-2:var(--rule); --blush-deep:var(--rule); --cream:#fffdf8; --rose:var(--gold-text); --gold-hi:#d8be86;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-logo:"Italiana","Didot",Georgia,serif;
  --f-body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-script:"Pinyon Script","Snell Roundhand",cursive;
  --f-name:var(--f-display); --f-serif:var(--f-display); --f-label:var(--f-body);
  --wrap:1180px;
}
html{scroll-behavior:smooth}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--f-body);font-weight:300;font-size:17px;line-height:1.65}
.wrap{max-width:var(--wrap);margin:0 auto}
a{color:inherit}
section{padding-block:80px}
.center{text-align:center}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
.lead{font-size:19px;line-height:1.65;max-width:56ch;margin:0 auto;color:var(--ink-soft);text-wrap:pretty}
.eyebrow{font-family:var(--f-body);font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-text);text-align:center;margin:0 0 12px}
.h-script{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,5.4vw,56px);line-height:1.05;margin:0 0 18px;color:var(--ink)}
.h-script em,.h-serif em{font-style:italic;color:var(--gold-text)}
.h-serif{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.8vw,38px);line-height:1.1;margin:0 0 16px}
.band{background:var(--paper-2);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));border-block:1px solid var(--rule)}

/* buttons: square, quiet */
.btn{border-radius:0;border:1px solid var(--ink);color:var(--ink);background:transparent;font-family:var(--f-body);font-weight:400;font-size:11px;letter-spacing:.22em;min-height:48px;padding:0 26px}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.small{min-height:38px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(246,241,233,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--rule)}
.head-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:16px;min-height:72px}
.logo{font-family:var(--f-logo);font-size:28px;letter-spacing:.24em;text-transform:uppercase;line-height:1;text-decoration:none;color:var(--ink);margin-right:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--f-body);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 12px;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}
.nav a[aria-current="page"]{color:var(--gold-text);border-bottom-color:var(--gold)}
.nav a.btn{padding:0 20px;min-height:42px;color:var(--paper);margin-left:8px;border-bottom:1px solid var(--ink)}
.nav a.btn:hover{color:var(--ink)}
.site-head .langs{position:static;box-shadow:none;background:transparent;backdrop-filter:none;padding:0;gap:0}
.site-head .langs button{font-family:var(--f-body);font-size:11px;letter-spacing:.14em;border-radius:0;min-width:32px;color:var(--ink-soft)}
.site-head .langs button[aria-pressed="true"]{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
.burger{display:none;border:1px solid var(--ink);background:transparent;border-radius:0;height:40px;padding:0 16px;font:400 11px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);cursor:pointer}
@media (max-width:940px){
  .burger{display:inline-flex;align-items:center}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:8px max(16px,env(safe-area-inset-left,0px)) 18px;border-bottom:1px solid var(--rule);box-shadow:0 20px 30px -24px rgba(31,27,24,.4)}
  .nav:not(.open){display:none}
  .nav a{padding:15px 4px;font-size:12px;border-bottom:1px solid var(--rule)}
  .nav a.btn{margin:14px 0 0;justify-content:center}
}

/* ---------- hero: text panel | framed photo ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-top:0;margin-top:0;padding:0;background:var(--paper)}
.hero>*{min-width:0}
.hero .txt{padding:72px 56px;display:grid;align-content:center;gap:20px;border-right:1px solid var(--rule)}
.hero .tag{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);margin:0}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,6vw,76px);line-height:1;margin:0;color:var(--ink)}
.hero h1 em{display:block;font-style:italic;color:var(--gold-text)}
.hero .lead{margin:0;max-width:40ch}
.hero .art{display:grid;place-items:center;padding:48px;background:linear-gradient(140deg,var(--paper-2),#f9f4ec)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .actions{justify-content:center}
.link{font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding:12px 2px}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));border-inline:0}
  .hero .txt{border-right:0;border-bottom:1px solid var(--rule);padding:48px max(20px,env(safe-area-inset-left,0px))}
  .hero .art{padding:36px 24px}
}

/* framed photo, like a nikah certificate */
.archframe{position:relative;aspect-ratio:3/4;max-width:400px;width:100%;margin:0 auto;background:#fffdf8;padding:14px;box-shadow:0 34px 60px -36px rgba(31,27,24,.55)}
.archframe::before{content:"";position:absolute;inset:14px;border:5px double var(--gold);opacity:.75;pointer-events:none;z-index:1}
.archframe img{width:100%;height:100%;object-fit:cover;display:block}
.ph{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:28px;background:#fffdf8;color:var(--gold)}
.ph svg{width:30%;max-width:96px;height:auto}
.ph span{font-family:var(--f-body);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.ph .nm{font-family:var(--f-script);font-size:clamp(26px,3vw,34px);letter-spacing:0;text-transform:none;color:var(--ink)}

/* ---------- categories: three ruled columns ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);margin-top:44px;counter-reset:c}
@media (max-width:860px){.cats{grid-template-columns:1fr}}
.cat{counter-increment:c;display:grid;gap:12px;align-content:start;text-decoration:none;color:var(--ink);padding:32px 28px 30px;border-right:1px solid var(--rule);transition:background .4s}
.cat:last-child{border-right:0}
@media (max-width:860px){.cat{border-right:0;border-bottom:1px solid var(--rule)}.cat:last-child{border-bottom:0}}
.cat:hover{background:var(--paper-2)}
.cat .archframe{max-width:none;aspect-ratio:4/5;box-shadow:0 20px 40px -32px rgba(31,27,24,.5);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat:hover .archframe{transform:translateY(-4px)}
.cat::before{content:counter(c,lower-roman) ".";font-family:var(--f-display);font-style:italic;color:var(--gold-text);font-size:18px}
.cat h3{font-family:var(--f-display);font-size:26px;line-height:1.1;margin:6px 0 0}
.cat p{margin:0;color:var(--ink-soft);font-size:15px}
.cat .more{font-size:11px;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--ink);justify-self:start;padding-bottom:3px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--rule)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding:28px 28px 8px 0}
.steps li+li{padding-left:28px;border-left:1px solid var(--rule)}
@media (max-width:820px){.steps li,.steps li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--rule)}}
.steps li::before{content:counter(s,lower-roman) ".";font-family:var(--f-display);font-style:italic;font-size:22px;color:var(--gold-text)}
.steps h3{font-family:var(--f-display);font-size:24px;margin:0}
.steps p{margin:0;color:var(--ink-soft)}

/* ---------- digital feature ---------- */
.digital{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.digital>*{min-width:0}
@media (max-width:820px){.digital{grid-template-columns:1fr;gap:40px}}
.phone{width:min(260px,100%);aspect-ratio:9/18.5;margin:0 auto;border-radius:36px;background:var(--ink);padding:10px;box-shadow:0 40px 70px -40px rgba(31,27,24,.7)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:var(--paper-2);display:grid;place-items:center}
.phone .env{width:78%;aspect-ratio:3/4;position:relative;background:#fffdf8;box-shadow:0 18px 30px -20px rgba(31,27,24,.5)}
.phone .env::before{content:"";position:absolute;inset:0 0 auto;height:64%;background:#efe6d8;clip-path:polygon(0 0,100% 0,100% 46%,50% 100%,0 46%);transform-origin:top;animation:flap 5s ease-in-out infinite}
.phone .seal{position:absolute;left:50%;top:64%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#e7cf98,var(--gold) 60%,#7a5d2c);box-shadow:0 4px 10px rgba(60,40,15,.4);display:grid;place-items:center;font-family:var(--f-script);font-size:18px;color:#5e451c;animation:seal 5s ease-in-out infinite}
.phone .hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
@keyframes seal{0%,40%,100%{transform:scale(1);opacity:1}48%{transform:scale(1.2);opacity:0}90%{opacity:0}}
@keyframes flap{0%,45%{transform:rotateX(0)}55%,88%{transform:rotateX(160deg);opacity:.6}100%{transform:rotateX(0)}}
.digital .eyebrow{text-align:start}
.feat{list-style:none;padding:0;margin:20px 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (max-width:520px){.feat{grid-template-columns:1fr}}
.feat li{padding:12px 0;border-bottom:1px solid var(--rule);display:flex;gap:12px;align-items:baseline}
.feat li::before{content:"✦";color:var(--gold);font-size:11px;flex:none}

/* ---------- gallery ---------- */
.gallery{columns:3 260px;column-gap:18px;margin-top:36px}
.gallery button{display:block;width:100%;margin:0 0 18px;padding:10px;border:1px solid var(--rule);background:#fffdf8;cursor:zoom-in;break-inside:avoid}
.gallery img{display:block;width:100%;height:auto;transition:opacity .4s}
.gallery button:hover img{opacity:.88}
.gallery .ph{aspect-ratio:4/5;border:1px solid var(--rule)}
.gal-note{text-align:center;color:var(--ink-soft);font-style:italic;margin:4px 0 0}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(24,20,18,.95);display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 56px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(16px,env(safe-area-inset-right,0px));background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:8px 16px;font:400 11px var(--f-body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.lightbox .nav-b{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.2);color:#fff;font-size:22px;cursor:pointer}
.lightbox .prev{left:max(12px,env(safe-area-inset-left,0px))}.lightbox .next{right:max(12px,env(safe-area-inset-right,0px))}

/* ---------- page head ---------- */
.page-head{padding-block:72px 32px;text-align:center;border-bottom:1px solid var(--rule)}
.page-head h1{font-family:var(--f-display);font-size:clamp(48px,8vw,84px);line-height:1;margin:8px 0 20px}
.page-head h1 em{font-style:italic;color:var(--gold-text)}

/* ---------- two column detail ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:36px}}
.split .lead{margin:0}
.checks{list-style:none;padding:0;margin:0;display:grid}
.checks li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--rule);padding:13px 0}
.checks li::before{content:"✦";color:var(--gold);font-size:11px;flex:none}

/* ---------- packages ---------- */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);margin-top:40px;background:var(--paper)}
@media (max-width:900px){.packs{grid-template-columns:1fr}}
.pack{padding:36px 30px;display:grid;gap:14px;align-content:start;border-right:1px solid var(--rule);counter-increment:p}
.pack:last-child{border-right:0}
@media (max-width:900px){.pack{border-right:0;border-bottom:1px solid var(--rule)}.pack:last-child{border-bottom:0}}
.packs{counter-reset:p}
.pack::before{content:counter(p,lower-roman) ".";font-family:var(--f-display);font-style:italic;color:var(--gold-text);font-size:18px}
.pack.featured{background:var(--ink);color:var(--paper)}
.pack.featured::before{color:var(--gold-hi)}
.pack.featured p{color:rgba(246,241,233,.75)}
.pack h3{font-family:var(--f-display);font-size:30px;line-height:1.05;margin:0}
.pack p{margin:0;color:var(--ink-soft)}
.pack .price{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin-top:6px}
.pack.featured .price{color:var(--gold-hi)}
.note{text-align:center;font-style:italic;color:var(--ink-soft);margin:24px auto 0;max-width:52ch}

/* ---------- order form ---------- */
.order{max-width:680px;margin:48px auto 80px;background:#fffdf8;border:1px solid var(--rule);padding:36px 32px;box-shadow:none;border-radius:0}
@media (max-width:560px){.order{padding:28px 20px}}
.order form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.order .full{grid-column:1/-1}
@media (max-width:560px){.order form{grid-template-columns:1fr}}
.field label{font-family:var(--f-body);font-size:10px;letter-spacing:.24em}
.field input,.field select,.field textarea{font:400 17px var(--f-body);border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;padding:10px 2px;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);box-shadow:none}
.err{color:#9b2c36}
.copybox{grid-column:1/-1;display:grid;gap:10px;background:var(--paper-2);padding:18px}
.copybox pre{margin:0;white-space:pre-wrap;font:400 16px var(--f-body);color:var(--ink)}

/* ---------- cta + footer ---------- */
.cta{text-align:center;display:grid;gap:14px;justify-items:center}
.cta .h-script{margin:0}
.site-foot{background:var(--ink);color:var(--paper);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:64px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) max(16px,env(safe-area-inset-left,0px))}
.foot-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}
.site-foot .logo{color:var(--paper);font-size:34px;display:block;margin:0}
.site-foot p{margin:10px 0 0;color:rgba(246,241,233,.7)}
.site-foot h4{font-family:var(--f-body);font-weight:400;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot a{text-decoration:none;color:var(--paper)}
.site-foot a:hover{color:var(--gold-hi)}
.site-foot .small{grid-column:1/-1;border-top:1px solid rgba(246,241,233,.15);padding-top:22px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,233,.5)}

.reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.pre{opacity:0;transform:translateY(20px)}
@media (prefers-reduced-motion:reduce){.reveal.pre{opacity:1;transform:none}.phone .env::before,.phone .seal{animation:none}}