/* School & Education Displays: look 06, adjusted.
   White page, navy ink, gold only for the main button and small marks, Fraunces headings, DM Sans text,
   rounded cards with a soft shadow, and a thin varsity stripe under section headings. Loaded after site.css. */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --soft:#F5F7FA; --ink:#14213D; --muted:#4F5B73; --line:#DDE3EC;
  --gold:#946200; --gold-soft:#FFF4D6; --ink-soft:#EEF1F6; --accent:#F2B632; --accent-hover:#E5A81F;
  --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"DM Sans","Segoe UI",Arial,sans-serif; --mono:"DM Sans","Segoe UI",Arial,sans-serif;
  --radius:16px; --wrap:1200px; --shadow:0 8px 24px rgba(20,33,61,.07);
  color-scheme:light;
}
body{font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* buttons: gold with navy text is the one loud thing on a page */
.btn{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:700;font-size:16px;min-height:48px;padding:12px 28px;box-shadow:0 6px 16px rgba(242,182,50,.28)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);background:#fff}

/* header */
header.site{background:rgba(255,255,255,.94)}
header.site .wrap{min-height:72px;gap:18px}
.logo .wm{font:700 21px var(--display);letter-spacing:-.02em;color:var(--ink)}
.logo .wm i{font-style:normal;color:var(--gold)}
nav.main{gap:4px}
nav.main a{padding:10px 13px;border-radius:999px;font-size:15px;min-height:44px;display:inline-flex;align-items:center}
nav.main a:hover,nav.main a[aria-current="page"]{background:var(--soft);color:var(--ink)}
.cart-btn{min-height:44px;padding:8px 18px;font-size:15px;font-weight:700}
.cart-btn b{background:var(--ink);color:#fff}
.menu-btn{min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px}
@media (max-width:1060px){
  nav.main{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px;box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0}
  nav.main a:last-child{border-bottom:0}
  .menu-btn{display:block;margin-left:auto}
}
@media (max-width:520px){.logo .wm{font-size:16px;white-space:normal;line-height:1.15;max-width:11ch;display:block}}

/* sections */
.block{padding-block:72px}
.block.soft{background:var(--soft)}
.stripe{position:relative;padding-bottom:18px;margin-bottom:32px}
.stripe::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:8px;border-radius:2px;
  background:linear-gradient(var(--ink) 0 3px,transparent 3px 5px,var(--accent) 5px 8px)}
@media (max-width:640px){.block{padding-block:48px}}

/* home hero: headline, one sentence, one button, one photo */
.hero06{padding-block:56px 24px;text-align:center}
.hero06 h1{font-size:clamp(34px,5vw,58px);line-height:1.08;max-width:18ch;margin-inline:auto}
.hero06 p{color:var(--muted);font-size:19px;max-width:54ch;margin:18px auto 26px}
.hero06 .hero-photo{display:block;width:100%;height:auto;margin-top:40px;border-radius:24px;box-shadow:var(--shadow);aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){.hero06{padding-block:32px 8px}.hero06 p{font-size:17px}.hero06 .hero-photo{margin-top:28px;border-radius:16px;aspect-ratio:4/3}}

/* picture tiles: six occasions, three products */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--ink)}
.tile img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.tile span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 8px 8px;font:600 20px var(--display)}
.tile span b{font:700 15px var(--body);color:var(--gold);white-space:nowrap}
.tile.prod img{aspect-ratio:1/1;object-fit:contain;background:#fff}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tiles.three{grid-template-columns:minmax(0,1fr)}.tile{padding:8px;border-radius:16px}.tile span{font-size:17px;padding:10px 6px 6px}}

/* how it works */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps3 div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px}
.steps3 b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:700 17px var(--body)}
.steps3 h3{font-size:22px;margin:16px 0 6px}
.steps3 p{color:var(--muted);font-size:16px}
@media (max-width:760px){.steps3{grid-template-columns:minmax(0,1fr);gap:14px}}

/* cards and product pages */
.pagehead{padding-block:40px 28px;border-bottom:0}
.crumbs{font:500 14px var(--body)}
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px 24px}
.card h3{font:600 19px/1.3 var(--display)}
.card .price{font:500 15px var(--body)}
.card .price b{font-weight:700}
.card .flat{border-radius:16px;aspect-ratio:1/1;background:#fff}
.card .flat img,.flat img.art{display:block;width:100%;height:100%;object-fit:contain}
.mock .fabric img{display:block;width:100%;height:100%;object-fit:cover}
.opts span{border-radius:12px;padding:11px 15px;font-size:15px}
.opts input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--gold-soft)}
.panel{border-radius:20px;box-shadow:var(--shadow)}
.field input,.field textarea,.field select{border-radius:12px}
.price small,.muted{color:var(--muted)}

/* footer: one quiet row */
footer.site{background:var(--ink);padding-block:36px 28px;margin-top:0}
footer.site .foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;color:#fff;font-size:15px}
footer.site .logo .wm{color:#fff}
footer.site .logo .wm i{color:var(--accent)}
footer.site .foot-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:22px}
footer.site .foot-links a{display:inline-block;padding:6px 0;color:#C5CCDB}
footer.site .base{margin-top:22px}