/* Phramed marketing site stylesheet (2026-09-14).
   The brutalist look from the homepage redesign, shared by /, /weddings, /events and /guide so they
   cannot drift apart. Only primitives more than one page uses live here; page-specific layout
   stays in each page's own <style>.

   NOT for the app. /studio, /view, galleries and the functions-rendered pages use /phramed.css,
   which defines several of the same token names (--paper, --ink, --accent) with different values.
   Never load both on one page. /planner is part of the app and stays on /phramed.css on purpose
   (Keegan, 2026-09-14): it was re-skinned to this look and put back the same day, because it sits
   next to the studio and a photographer should not see two looks inside their account. */
:root{
  color-scheme:light;
  --paper:#f1f0eb;--paper-2:#e6e4dd;--card:#f8f7f3;
  --ink:#111111;--muted:#4d4b46;--faint:#6a675f;
  --rule:#111111;--rule-soft:rgba(17,17,17,.22);
  /* The one color. Plum from the 2026-09-13 rebrand, kept so this is a new layout for the same
     brand rather than a different company. Used for emphasis and the hard shadow on the
     price card, nowhere else. */
  --accent:#8a3d63;--accent-deep:#6e2f4f;--accent-on-dark:#d9a3bf;
  --disp:"Archivo","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Depth in this style is a hard offset, not a blur. It reads as a stack of paper. */
  --hard-1:4px 4px 0 var(--ink);--hard-2:8px 8px 0 var(--ink);--hard-accent:10px 10px 0 var(--accent);
  --z-nav:100;--z-toast:900;
  --frame:min(1320px,100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--disp);font-stretch:100%;line-height:1.55;overflow-x:hidden;
  padding-inline:clamp(16px,2.4vw,32px)}
/* paper grain, same recipe as the current homepage */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* The frame: every section sits between two vertical rules, like the reference. */
.frame{width:var(--frame);margin-inline:auto;border-inline:1px solid var(--rule);position:relative}
.pad{padding:clamp(1rem,2.2vw,1.6rem)}

/* Type */
.label{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.label b{color:var(--ink);font-weight:600}
/* Softened 2026-09-14 (Keegan: "not as brutalist"): 850 condensed at -.04em read as a poster
   stamp. 680 at normal width with looser tracking keeps the scale and loses the shout. */
.mega{font-family:var(--disp);font-weight:680;font-stretch:100%;text-transform:uppercase;letter-spacing:-.025em;line-height:.98}
.h1{font-size:clamp(2.9rem,8.4vw,6rem)}
/* 1.85rem floor, not 2.2rem: "DELIVERY SYSTEM." is welded with an nbsp and at 2.2rem it ran
   ~20px past a 375px screen. */
.h2{font-size:clamp(1.85rem,6vw,4.6rem)}
.h3{font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.02;letter-spacing:-.015em}
.accent{color:var(--accent)}
.lead{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--muted);max-width:44ch}
.body{color:var(--muted);max-width:60ch}

/* Buttons: bordered boxes with a mono label, press down into their own shadow. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.1rem;
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--hard-1);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .2s,color .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn .sep{opacity:.55;font-weight:500}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--accent-deep)}
.btn-bare{box-shadow:none;background:transparent}
.btn-bare:hover{transform:none;box-shadow:none;background:var(--ink);color:var(--paper)}
.btn-bare:active{transform:scale(.97)}
.tlink{font-family:var(--mono);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;display:inline-flex;align-items:center;gap:.4rem;min-height:44px}
.tlink:hover{color:var(--accent)}

/* NAV */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper)}
.nav .frame{border-block:1px solid var(--rule);display:flex;align-items:center;gap:1rem;padding:.6rem clamp(.6rem,1.6vw,1rem);min-height:62px}
.logo{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--rule);border-radius:10px;padding:.42rem .8rem .42rem .5rem;
  text-decoration:none;font-weight:700;font-stretch:100%;font-size:1rem;letter-spacing:0;text-transform:uppercase;min-height:44px}
/* the dot is an aperture: it opens on hover */
.logo i{width:18px;height:18px;border-radius:50%;background:var(--ink);display:block;position:relative;transition:box-shadow .3s var(--ease)}
.logo i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--paper);transform:scale(0);transition:transform .3s var(--ease)}
.logo:hover i::after{transform:scale(1)}
.nav-links{display:flex;gap:1.6rem;margin-inline:auto}
.nav-links a{font-family:var(--mono);font-size:.8rem;font-weight:500;text-transform:uppercase;text-decoration:none;letter-spacing:.03em;
  padding-block:.6rem;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .25s var(--ease)}
.nav-links a:hover{background-size:100% 1px}
.nav-cta{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.nav-cta .btn{min-height:44px;padding:.55rem .85rem;font-size:.76rem}
@media(min-width:861px){.nav-cta{margin-left:0}}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:420px){.nav-cta .btn-bare{display:none}}

/* TICKER */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-inline:1px solid var(--rule)}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;list-style:none;flex-shrink:0}
.ticker li{font-family:var(--mono);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding:.8rem 0;white-space:nowrap}
.ticker li::after{content:"//";color:var(--accent-on-dark);padding-inline:2.2rem}
@keyframes tick{to{transform:translateX(-50%)}}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.box{border:1px solid var(--rule);margin:clamp(.8rem,1.6vw,1.2rem);padding:clamp(1rem,2.4vw,1.6rem)}
.box .label{margin-top:1.2rem;display:block;max-width:80ch;line-height:1.6}
.num{font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline}
.num small{font-size:.34em;letter-spacing:0;margin-left:.2em}
/* SECTION HEAD ROW */
.sec{border-bottom:1px solid var(--rule)}
.sec-head{display:grid;gap:1rem 2rem;padding:clamp(1.4rem,3.4vw,2.6rem) clamp(1rem,2.2vw,1.6rem) clamp(1rem,2vw,1.4rem);align-items:end}
@media(min-width:900px){.sec-head{grid-template-columns:1.3fr .7fr}}

/* WINDOW: a real screenshot in a bordered frame with a black title bar */
.window{margin:0 clamp(.8rem,1.6vw,1.2rem) clamp(.8rem,1.6vw,1.2rem);border:1px solid var(--rule);background:var(--card);box-shadow:var(--hard-2)}
.window-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--paper);padding:.55rem .8rem}
.window-bar .label{color:var(--paper)}
.window-bar .dots{display:flex;gap:6px}
.window-bar .dots i{width:9px;height:9px;border:1px solid var(--paper);display:block}
/* Crop to the cover plus the first row of the grid, so the gallery title is never sliced. */
.window-body{aspect-ratio:10/17;overflow:hidden;position:relative}
@media(min-width:701px){.window-body{aspect-ratio:5/4}}
.window-body img{width:100%;height:100%;object-fit:cover;object-position:top center}
.window-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;border-top:1px solid var(--rule);padding:.8rem}
/* INCLUDED BAND */
.band{background:var(--ink);color:var(--paper);border-inline:1px solid var(--rule)}
.band .in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding:clamp(1.2rem,3vw,2rem) clamp(1rem,2.2vw,1.6rem)}
.band p{font-weight:620;font-stretch:100%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.2rem,2.6vw,1.8rem);line-height:1.05;max-width:36ch}
.band .tlink{color:var(--accent-on-dark)}
.band .tlink:hover{color:var(--paper)}
.promises{list-style:none;margin-top:1.8rem;border-top:1px solid var(--rule)}
.promises li{display:grid;grid-template-columns:3.2rem 1fr;gap:.8rem;padding:.95rem 0;border-bottom:1px solid var(--rule-soft)}
.promises .label{padding-top:.2rem}
.promises b{display:block;font-weight:650;text-transform:uppercase;letter-spacing:0;font-stretch:100%;font-size:1.02rem;line-height:1.15}
.promises span{color:var(--muted);font-size:.95rem}
.price-card{background:var(--card);border:1px solid var(--rule);box-shadow:var(--hard-accent);max-width:460px;width:100%;margin-inline:auto}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid var(--rule)}
.price-top .label{color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:.45rem}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{50%{opacity:.25}}
.price-mid{padding:1.1rem .9rem}
.amount{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.amount .num{font-size:clamp(3.4rem,9vw,5rem)}
.amount-note{margin-top:.5rem;min-height:1.4em}
.includes{list-style:none;border-top:1px solid var(--rule)}
.includes li{padding:.7rem .9rem;border-bottom:1px solid var(--rule-soft);font-size:.93rem;color:var(--muted);display:grid;grid-template-columns:1.6rem 1fr}
.includes li::before{content:"+";font-family:var(--mono);font-weight:600;color:var(--ink)}
.includes b{color:var(--ink);font-weight:650}
.price-bot{padding:.9rem}
.price-bot .btn{width:100%}
.price-bot .label{display:block;margin-top:.9rem;text-transform:none;letter-spacing:0;font-size:.76rem;line-height:1.5;text-align:center}
/* FOOTER */
footer .frame{border-bottom:1px solid var(--rule)}
.foot-word{font-family:var(--disp);font-weight:720;font-stretch:92%;text-transform:uppercase;letter-spacing:-.03em;line-height:.82;
  font-size:clamp(3.4rem,17vw,15.5rem);padding:clamp(1rem,3vw,2rem) clamp(.6rem,1.4vw,1rem) 0;overflow:hidden;white-space:nowrap}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;border-top:1px solid var(--rule);padding:1rem clamp(1rem,2.2vw,1.6rem)}
.foot-links{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.foot-links a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot-links a:hover{color:var(--accent)}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,calc(100% + 3rem));z-index:var(--z-toast);background:var(--ink);color:var(--paper);
  padding:.8rem 1.1rem;font-family:var(--mono);font-size:.82rem;border:1px solid var(--paper);box-shadow:var(--hard-accent);transition:transform .4s var(--ease);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
.toast:empty{display:none}

/* Reveal on scroll, gated on JS. Nothing is hidden until a page's script adds .js-anim to <html>,
   so a visitor whose JS fails or is blocked sees every section instead of blank space. /weddings
   is paid traffic, which is where that matters most; the homepage used to hide first. */
.js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-anim .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-anim .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}