/* ============================================================
   Preston Prints — shared styles.

   This sub-site has its OWN brand, independent of TheFrankenSite
   (which is only the host). Palette is taken from
   prestonprints.store: deep forest green + off-white.

   Readability changes made deliberately vs. the original site:
     · Body copy is near-black, never green. Green is reserved for
       headings, bands, and accents — green body text on white was
       the hardest-to-read part of the old site.
     · The footer no longer puts mid-green text on a green band;
       footer text is white/cream at a real weight.
     · Type scales up: 1.0625rem base instead of the old ~0.85rem.
   ============================================================ */
:root{
  /* ---- the greens, straight off prestonprints.store ---- */
  --green-deep:#1e4a35;      /* header / footer bands */
  --green-mid:#297f59;       /* notice bar. Darkened from the original
                                #2e8b62 so white text on it clears 4.5:1
                                (it was 4.21 — a real fail at .9rem). */
  --green-dark:#15351f;      /* deepest, for text on light */
  --green-bright:#3fa876;    /* hover / active */
  --green-pale:#e8f0ea;      /* tinted section backgrounds */
  --green-tint:#f2f7f3;      /* barely-there wash */

  /* ---- surfaces ---- */
  --bg:#f5f7f5;              /* page body, as the original */
  --card:#ffffff;
  --well:#e9ede9;            /* recessed wells behind images */
  --line:#d8e0da;
  --line-strong:#bcccc1;

  /* ---- text: high contrast, not green ---- */
  --text:#16211a;            /* ~14:1 on --bg */
  --text-soft:#3d4d43;       /* ~8:1  on --bg — the lightest body color allowed */
  --text-onDark:#f4f8f5;
  --text-onDark-soft:#c8dbcf; /* ~7:1 on --green-deep */

  /* ---- accent: vivid orange.
         #bf5700 is FULLY saturated (100%) — more vibrant than the muted
         #b35f18 it replaces — while still carrying WHITE text at 4.6:1,
         so buttons keep white labels. A brighter/lighter orange would
         look punchier but can only take dark text, which reads as
         near-black on orange and looks wrong on a button.
           --orange        the fill: buttons, the before/after arrow
           --orange-hover  a touch brighter for hover
           --orange-text   small orange TEXT on white/off-white (5.1:1)
           --orange-onDark small orange text on the green bands (5.2:1)
         ---- */
  --orange:#bf5700;
  /* Hover goes DARKER, not lighter: a lighter orange would drop the
     white label to 3.6:1. Darker keeps it readable and still reads as
     a state change. */
  --orange-hover:#a34a00;
  --orange-text:#a85a16;
  --orange-onDark:#ffa64d;
  --orange-pale:#fdf0e4;

  /* Back-compat aliases: earlier markup referenced --amber*. Keeping
     these means old inline styles still resolve to the new palette. */
  --amber:var(--orange);
  --amber-text:var(--orange-text);
  --amber-bright:var(--orange-hover);
  --amber-pale:var(--orange-pale);

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 3px rgba(21,53,31,.07), 0 1px 2px rgba(21,53,31,.04);
  --shadow-md:0 4px 14px -4px rgba(21,53,31,.13), 0 2px 6px -2px rgba(21,53,31,.08);
  --shadow-lg:0 14px 36px -10px rgba(21,53,31,.22);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  /* The original used a condensed rounded face. These are the closest
     widely-available stacks; no webfont so there's nothing to load. */
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand-word{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  letter-spacing:-.01em;
}

.shell{flex:1}
.wrap{
  width:100%;max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.15rem,4vw,2rem);
}
.wrap.narrow{max-width:760px}

/* ================= top notice bar ================= */
.notice{
  background:var(--green-mid);
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  padding:.7rem 0;
}
.notice .wrap{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;flex-wrap:wrap;text-align:center;
}

/* ================= site header ================= */
.site-head{
  background:var(--green-deep);
  color:var(--text-onDark);
}
.site-head .wrap{
  display:flex;align-items:center;gap:1.25rem;
  min-height:64px;
  flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  color:var(--text-onDark);
  text-decoration:none;
  font-weight:700;font-size:1.1rem;
  margin-right:auto;
}
.brand:hover .brand-word,.brand:focus-visible .brand-word{color:#fff}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
}

/* ---- nav ---- */
.nav{
  display:flex;align-items:center;gap:.15rem;
  list-style:none;margin:0;padding:0;
  flex-wrap:wrap;
}
.nav a{
  display:block;
  padding:.45rem .7rem;
  border-radius:7px;
  color:var(--text-onDark-soft);
  text-decoration:none;
  font-size:.94rem;font-weight:600;
  transition:background .16s ease,color .16s ease;
}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.11);color:#fff}
.nav a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.14);
}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ================= hero band ================= */
.hero-band{
  background:var(--green-deep);
  color:var(--text-onDark);
  padding:clamp(2.25rem,6vw,3.75rem) 0 clamp(2.5rem,7vw,4.25rem);
}
.hero-band h1{
  font-size:clamp(1.9rem,5.5vw,3rem);
  margin:0 0 .5rem;
  font-weight:700;line-height:1.12;
  color:#fff;
}
.hero-band .lede{
  color:var(--text-onDark-soft);
  font-size:clamp(1rem,2.5vw,1.15rem);
  margin:0;max-width:62ch;
}
.eyebrow{
  display:inline-block;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;
  color:var(--orange-onDark);
  margin:0 0 .55rem;
}


/* ================= section headings ================= */
.section{padding:clamp(2.25rem,6vw,3.5rem) 0}
.section.tinted{background:var(--green-tint);border-block:1px solid var(--line)}
.section-head{text-align:center;margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.section-head h2{
  font-size:clamp(1.5rem,4vw,2.1rem);
  color:var(--green-deep);
  margin:0 0 .4rem;
  font-weight:700;
}
.section-head p{
  color:var(--text-soft);
  margin:0 auto;max-width:60ch;
  font-size:1rem;
}
.section-head .bar{
  width:56px;height:3px;border-radius:2px;
  background:var(--amber);
  margin:.85rem auto 0;
}
.section-head.left{text-align:left}
.section-head.left .bar{margin-left:0}
.section-head.left p{margin-left:0}

/* ================= buttons ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;
  border-radius:var(--radius-sm);
  border:1.5px solid transparent;
  font:inherit;font-weight:700;font-size:.96rem;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn-primary{
  background:var(--green-deep);color:#fff;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--green-bright);transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.btn-amber,.btn-orange{
  background:var(--orange);color:#fff;
}
.btn-amber:hover,.btn-amber:focus-visible,
.btn-orange:hover,.btn-orange:focus-visible{
  background:var(--orange-hover);color:#fff;
  transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.btn-ghost{
  background:transparent;color:var(--green-deep);border-color:var(--line-strong);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  background:var(--card);border-color:var(--green-deep);
}
/* on the dark bands */
.btn-onDark{background:#fff;color:var(--green-deep)}
.btn-onDark:hover,.btn-onDark:focus-visible{
  background:var(--green-pale);transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.notice .btn,.hero-band .btn{outline-color:#fff}

/* ================= placeholder art =================
   Every image sits inside one of these. A real file covers the box
   completely; until then the dashed frame and its label show, so an
   unfinished page still reads as deliberate rather than broken. */
.ph{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(21,53,31,.028) 0 10px, transparent 10px 20px),
    var(--well);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);
  overflow:hidden;
  color:#5d6f64;          /* 4.5:1 on the well behind it */
  text-align:center;
}
.ph-label{
  padding:1rem;
  font-size:.76rem;font-weight:600;
  letter-spacing:.02em;line-height:1.45;
  overflow-wrap:anywhere;
}
.ph-label code{
  display:block;margin-top:.3rem;
  font-size:.72rem;color:var(--amber-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ph>img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* `onerror` in the markup adds this, revealing the label beneath */
.ph>img.missing{display:none}

/* ================= chips / tags ================= */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.chips li{
  font-size:.78rem;font-weight:650;
  padding:.28rem .62rem;border-radius:999px;
  color:var(--green-deep);
  background:var(--green-pale);
  border:1px solid #cfe0d5;
}
.chips.on-dark li{
  color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
}

/* ================= footer ================= */
.site-foot{
  background:var(--green-deep);
  color:var(--text-onDark-soft);
  padding:clamp(2rem,5vw,2.75rem) 0 1.5rem;
  margin-top:auto;
}
.foot-grid{
  display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  align-items:start;
}
.site-foot h3{
  color:#fff;font-size:1rem;margin:0 0 .5rem;font-weight:700;
}
.site-foot p{margin:0 0 .75rem;font-size:.92rem}
.site-foot ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.site-foot li{margin-bottom:.3rem}
.site-foot a{color:#fff;font-weight:600}
.site-foot a:hover{text-decoration:underline}
.foot-base{
  margin-top:1.75rem;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;
}
.foot-base .host{color:var(--text-onDark-soft)}
.foot-base .host a{font-weight:600}

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