/* Studio Edelweiss — studioedelweiss.com
   Palette, type and lockup from the Studio Edelweiss brand package. */

/* ---------- fonts (self-hosted, see fonts/) ---------- */

@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-v31-latin/montserrat-v31-latin-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-v31-latin/montserrat-v31-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-v31-latin/montserrat-v31-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Allura';src:url('fonts/allura-v23-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */

:root{
  --green:#2F4A3A;      /* Alpine Green */
  --sage:#8C9B8A;       /* Sage */
  --ivory:#F8F5EC;      /* Ivory */
  --blush:#E8C4C0;      /* Blush */
  --gold:#C9A96A;       /* Gold */

  --ink:#2F4A3A;
  --mute:#5E6F5D;       /* darkened sage, legible as running text */
  --line:rgba(47,74,58,.16);
  --rule:#E3C9C5;          /* blush, darkened just enough to read as a hairline */
  --blush-ground:#F6E7E4;   /* blush, tinted down to a section ground */

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --script:'Allura','Snell Roundhand','Apple Chancery',cursive;

  --gutter:clamp(22px,6vw,64px);
  --maxw:920px;

  /* paper tooth — generated, no image file */
  --texture: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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
.dotline{overflow-wrap:break-word}

body{
  margin:0;
  background-color:var(--ivory);
  background-image:var(--texture);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}

h1,h2{text-wrap:balance}

.eyebrow{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(12px,1.35vw,13.5px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--mute);
  margin:0 0 16px;
}

/* a caps line with gold dots — the lockup's own device */
.dotline{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(9.5px,1.32vw,11px);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin:0;
}
.dotline .dot{
  color:var(--gold);padding:0 .22em;
  opacity:.55;transition:opacity .9s ease .25s;
}
.in .dotline .dot,.dotline .dot{opacity:1}

/* ---------- hero ---------- */

.hero{padding-block:clamp(56px,10vw,108px) clamp(40px,7vw,74px);text-align:center}

.lockup{
  max-width:clamp(290px,58vw,500px);
  margin:0 auto;
}

.lockup .mark{
  display:block;width:45%;height:auto;margin:0 auto clamp(10px,1.4vw,16px);
}

.studio{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.6vw,22px);
  margin:0;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(10px,1.85vw,14px);
  letter-spacing:.44em;text-indent:.44em;text-transform:uppercase;
  color:var(--green);
}
.studio::before,.studio::after{
  content:'';flex:1 1 auto;max-width:74px;height:1px;background:var(--green);opacity:.75;
}

.wordmark{
  margin:.1em 0 0;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,8.6vw,88px);
  line-height:1;letter-spacing:.075em;text-indent:.075em;
  text-transform:uppercase;color:var(--green);
}

.services{
  margin:clamp(8px,1.2vw,12px) 0 0;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(9.5px,1.62vw,13px);
  letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;
  color:var(--green);
}
.services .dot{color:var(--gold);padding:0 .28em}

.signature{
  margin:clamp(5px,1vw,9px) 0 0;
  font-family:var(--script);
  font-size:clamp(26px,5.6vw,39px);
  line-height:1.15;color:var(--gold);
}

.tagline{
  margin:clamp(34px,5.4vw,52px) auto 0;
  max-width:34ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.7vw,28px);
  line-height:1.5;color:var(--green);
}

/* His botanical illustration, used once and very faintly.
   To remove it entirely, delete this block and the .hero position rule. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  right:max(-60px,-6vw);bottom:-8%;
  width:clamp(210px,26vw,360px);aspect-ratio:490/760;
  background:url('images/edelweiss-watermark.png') no-repeat center/contain;
  opacity:.09;
}
@media (max-width:720px){ .hero::before{opacity:.07;right:-18%;width:60vw} }

/* ---------- rules ---------- */

.rule{
  width:100%;height:1px;border:0;margin:0;
  background:var(--rule);
  transform-origin:center;
}

/* ---------- the two pillars ---------- */

.pillars{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,72px);
  padding-block:clamp(52px,8vw,88px);
}

.pillar h2{
  margin:0 0 .6em;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.95vw,30px);
  line-height:1.28;text-wrap:pretty;letter-spacing:.012em;color:var(--green);
}
.pillar p{margin:0 0 1.5em;color:var(--mute)}

/* ---------- about, on a blush ground ---------- */

.about{padding-block:clamp(52px,8vw,88px) clamp(28px,4.5vw,44px)}
.about{text-align:center}
.contact .eyebrow{color:#7E6A67}
.about .body{max-width:56ch;margin-inline:auto;text-align:left}
.about p{margin:0 0 1.15em;color:var(--mute)}
.about p:last-child{margin-bottom:0}
.about p strong{font-weight:500;color:var(--ink)}
.place{margin-top:1.7em !important;font-size:.92em;color:var(--sage);letter-spacing:.02em}

/* ---------- flower ornament ---------- */

.ornament{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,28px);
  max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--gutter);
  padding-block:clamp(44px,7vw,72px) clamp(30px,5vw,52px);
}
.ornament img{width:clamp(64px,8.4vw,90px);height:auto;flex:none}
.orn-rule{flex:1 1 auto;max-width:190px;height:1px;background:var(--rule);transform-origin:center}

/* ---------- contact ---------- */

.contact{
  background-color:var(--blush-ground);
  background-image:var(--texture);
  padding-block:clamp(46px,7vw,78px);
  text-align:center;
}
.contact h2{
  margin:0 0 .6em;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.5vw,34px);color:var(--green);
}

.mail{
  display:inline-block;margin-top:clamp(18px,2.8vw,26px);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,3.2vw,31px);
  line-height:1.25;color:var(--green);cursor:pointer;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;
  transition:background-size .32s ease;
}
.mail:hover,.mail:focus-visible{background-size:100% 1px}

.note{margin:clamp(24px,3.6vw,34px) 0 0;font-size:.9em;color:#7E6A67}

/* ---------- footer ---------- */

footer{
  background-color:var(--green);
  background-image:var(--texture);
  color:var(--ivory);
  padding-block:clamp(30px,4.6vw,44px);
}
.footbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,34px);text-align:center;
}
.creed{
  margin:0;font-family:var(--sans);font-weight:300;
  font-size:clamp(10px,1.5vw,12px);
  letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;
  color:rgba(248,245,236,.9);
}
.creed .dot{color:var(--gold);padding:0 .12em}
.footsig{margin:0;font-family:var(--script);font-size:clamp(24px,3.4vw,33px);color:rgba(248,245,236,.94)}
.colophon{margin:clamp(16px,2.4vw,22px) 0 0;text-align:center;font-size:11px;letter-spacing:.06em;color:rgba(248,245,236,.5)}

/* ---------- motion ----------
   Everything is visible by default. The animations are added only once
   the `js` class lands on <html>, so a failed script leaves a readable page. */

.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

.js .rule,.js .orn-rule{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.js .rule.in,.js .orn-rule.in{transform:scaleX(1)}

.js .dotline .dot{opacity:.35}
.js .in .dotline .dot,.js .dotline.in .dot{opacity:1}

/* Safety net: if the reveal script dies after the js class lands, the first
   screen still appears. Only the hero, so the scroll reveals below keep working. */
@keyframes se-reveal-safety{to{opacity:1;transform:none}}
.js .hero .reveal{animation:se-reveal-safety .01s linear 3s forwards}

/* the hero settles once, in order */
.js .hero .reveal:nth-child(1){transition-delay:.05s}
.js .lockup .mark{transition-delay:.05s}
.js .lockup .studio{transition-delay:.16s}
.js .lockup .wordmark{transition-delay:.24s}
.js .lockup .services{transition-delay:.34s}
.js .lockup .signature{transition-delay:.42s}
.js .hero .tagline{transition-delay:.56s}

/* ---------- responsive ---------- */

@media (max-width:720px){
  .pillars{grid-template-columns:1fr;gap:clamp(34px,8vw,46px)}
  .footbar{flex-direction:column;gap:12px}
  .lockup{max-width:min(420px,88vw)}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .rule,.js .orn-rule{opacity:1 !important;transform:none !important;transition:none !important}
  .js .dotline .dot{opacity:1 !important}
  *{transition:none !important;animation:none !important}
}

@media print{
  body,.about,footer{background:#fff !important;background-image:none !important}
  footer{color:#2F4A3A}
  .reveal,.rule,.orn-rule{opacity:1 !important;transform:none !important}
}