/* Maya Dahlia, shared styles for the journal and contact pages.
   The home page has its own stylesheet (assets/home.css); these are the same
   tokens and components, extracted so the newer pages stay in step. */

:root{
  --ivory:#F7F3ED;
  --ivory-warm:#FCFAF6;
  --blush:#E9DAD2;
  --blush-wash:#F4E9E3;
  --rose-taupe:#B8968B;
  --rose-deep:#76554D;
  --cocoa:#5A413C;
  --warm-grey:#604C48;
  --ink-soft:#604C48;
  --gold:#C5A168;
  --gold-light:#EBD5A6;

  --foil:linear-gradient(112deg,#6E5222 0%,#A8823F 15%,#DCC084 30%,#B8924F 44%,#8A6A31 57%,#E0C68E 73%,#A8823F 87%,#6E5222 100%);

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;

  --gutter:clamp(22px,5.5vw,88px);
  --rhythm:clamp(72px,10vw,150px);

  --lift:0 1px 2px rgba(90,65,60,.03),0 20px 54px -20px rgba(90,65,60,.20);
  --lift-hi:0 2px 5px rgba(90,65,60,.05),0 34px 76px -22px rgba(90,65,60,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--cocoa);
  font-family:var(--body);font-weight:400;
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--blush);color:var(--cocoa)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.label{
  font-weight:500;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
}
.foil-text{
  background:none;color:#6E5222;
}

/* ---------- lace ---------- */
.lace{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("/assets/lace.svg");
  background-size:59px 76px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30px,rgba(0,0,0,.4) 64px,rgba(0,0,0,0) 104px);
  mask-image:linear-gradient(180deg,#000 0,#000 30px,rgba(0,0,0,.4) 64px,rgba(0,0,0,0) 104px);
}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  background:rgba(247,243,237,.95);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(197,161,104,.42);
}
.brand{
  font-family:var(--display);font-weight:400;font-size:1.04rem;
  letter-spacing:.34em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:clamp(14px,2.3vw,32px)}
.nav a{
  font-weight:500;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--cocoa);padding:4px 0;
  border-bottom:1px solid transparent;transition:color .4s ease,border-color .4s ease;
}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--gold)}
.nav .pill{
  border:1px solid rgba(197,161,104,.75);border-radius:999px;padding:9px 20px;
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.nav .pill:hover{background:var(--cocoa);border-color:var(--cocoa);color:#FCFAF6}
@media(max-width:900px){ .nav a:not(.pill){display:none} }

/* ---------- structure ---------- */
.band{padding:var(--rhythm) var(--gutter);position:relative;overflow:hidden}
.band-ivory{background:var(--ivory)}
.band-blush{background:linear-gradient(180deg,var(--ivory) 0%,var(--blush-wash) 45%,var(--ivory) 100%)}
.inner{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.narrow{max-width:720px;margin-inline:auto}

.head{text-align:center;margin-bottom:clamp(44px,6vw,84px)}
.head .label{display:block;margin-bottom:18px}
.head h1,.head h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,4.8vw,3.6rem);letter-spacing:.04em;margin:18px 0 0;
}
.head p{max-width:52ch;margin:20px auto 0;color:var(--warm-grey);font-size:.96rem}

.rule{display:block;width:min(300px,58vw);height:24px;margin-inline:auto}
.rule path,.rule line{fill:none;stroke:url(#foilstroke);stroke-width:1.2}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:.84rem;
  letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;cursor:pointer;
  border:none;font-family:var(--body);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,background-position .6s ease,background .4s ease,color .4s ease,border-color .4s ease;
}
.btn-gold{
  background:var(--cocoa);color:#FCFAF6;
  box-shadow:0 12px 32px -14px rgba(90,65,60,.55);
}
.btn-gold:hover{background:#3E2C28;transform:translateY(-2px)}
.btn-line{border:1px solid rgba(184,150,139,.6);color:var(--cocoa);background:transparent}
.btn-line:hover{border-color:var(--gold);background:rgba(197,161,104,.1)}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- frames and cards ---------- */
.frame{
  position:relative;overflow:hidden;background:var(--ivory-warm);
  border:1px solid rgba(197,161,104,.36);box-shadow:var(--lift);
  transition:box-shadow .55s ease,border-color .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.corner{position:absolute;width:16px;height:16px;border:1px solid var(--gold);opacity:.8;z-index:2}
.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.br{bottom:9px;right:9px;border-left:0;border-top:0}

/* ---------- forms ---------- */
.form{max-width:640px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media(max-width:620px){ .grid2{grid-template-columns:1fr} }
.wide{grid-column:1/-1}
.field span{
  display:block;margin-bottom:8px;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-weight:400;font-size:1rem;color:var(--cocoa);
  background:var(--ivory-warm);border:1px solid rgba(184,150,139,.5);border-radius:0;
  padding:13px 15px;-webkit-appearance:none;appearance:none;
  transition:border-color .35s ease,box-shadow .35s ease;
}
.field textarea{resize:vertical;min-height:120px;font-family:var(--body)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,161,104,.16);
}
.pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- flavour chips on enquiry forms ---------- */
.flav-wrap{display:none}
.flav-wrap.on{display:block}
.flav-chips{display:flex;flex-wrap:wrap;gap:8px}
.flav-chip{position:relative;display:inline-block}
.flav-chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.flav-chip .chip-face{
  display:inline-block;border:1px solid rgba(184,150,139,.5);padding:8px 15px;
  font-size:.76rem;letter-spacing:.04em;color:var(--cocoa);background:var(--ivory-warm);
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.flav-chip input:checked + .chip-face{border-color:var(--gold);background:rgba(197,161,104,.16);color:#8A6A31}
.flav-chip input:focus-visible + .chip-face{outline:1px solid var(--gold);outline-offset:2px}
.note{margin:16px 0 0;font-size:.78rem;line-height:1.6;min-height:1.2em}
.note.err{color:#9B2242}
.done{
  padding:38px 30px;text-align:center;background:var(--ivory-warm);
  border:1px solid rgba(197,161,104,.4);box-shadow:var(--lift);
}
.done h3{font-family:var(--display);font-weight:300;font-size:2rem;letter-spacing:.06em;margin:0 0 14px}
.done p{margin:0;color:var(--warm-grey);font-size:.92rem;line-height:1.75;max-width:42ch;margin-inline:auto}

/* ---------- footer ---------- */
footer{
  background:var(--cocoa);border-top:1px solid rgba(197,161,104,.4);
  color:#E9DAD2;text-align:center;padding:56px var(--gutter);
}
footer .roundel text{fill:#FCFAF6}
footer .roundel circle,footer .roundel path{stroke:#E9DAD2}
footer .foil-text{background:none;color:#E9DAD2}
.roundel{width:104px;height:104px;margin:0 auto 22px;display:block}
.foot-nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,2.4vw,32px);
  margin-bottom:26px;
}
.foot-nav a{
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  text-decoration:none;color:#FCFAF6;
}
.foot-nav a:hover{opacity:1}

/* ---------- sample content flag ---------- */
.flag{
  display:inline-block;margin-top:16px;
  font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  color:var(--rose-deep);border:1px dashed rgba(184,150,139,.7);
  padding:7px 14px;border-radius:999px;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}