:root{
/* primitives — brand pack hexes as base (700/500 steps), oklch-derived tints/shades to fill the ramp */
--brown-900:#3a2420;
--brown-800:#4f2f28;
--brown-700:#683D34; /* brand: Espresso */
--brown-500:#8c5c4e;
--brown-300:#b9927f;
--brown-100:#e2d0c4;

--terracotta-800:#a13f1c;
--terracotta-700:#b84a21;
--terracotta-500:#CF5527; /* brand: Terracotta */
--terracotta-300:#e79267;
--terracotta-100:#f6d9c4;

--gold-700:#e0bd76;
--gold-500:#F9E1AF; /* brand: Marigold */
--gold-300:#fceccb;
--gold-100:#fdf6e6;

--cream-500:#efe3c8;
--cream-300:#F8F4E7; /* brand: Paper */
--cream-100:#fffdf7;

--blue-800:#4f6f9e;
--blue-700:#6689bb;
--blue-500:#7EA2D4; /* brand: Sky */
--blue-300:#aec6e5;
--blue-100:#dde8f6;

--white:#ffffff;
--ink:#2c1c18;

/* semantic aliases */
--color-bg:var(--cream-300);
--color-bg-alt:var(--gold-300);
--color-bg-deep:var(--brown-700);
--color-surface:var(--white);
--color-surface-sunken:var(--cream-500);

--color-text:var(--ink);
--color-text-muted:var(--brown-500);
--color-text-on-dark:var(--cream-100);
--color-text-on-accent:var(--cream-100);

--color-accent:var(--terracotta-500);
--color-accent-hover:var(--terracotta-700);
--color-accent-active:var(--terracotta-800);
--color-accent-soft:var(--terracotta-100);

--color-secondary:var(--blue-500);
--color-secondary-hover:var(--blue-700);
--color-secondary-soft:var(--blue-100);

--color-tertiary:var(--gold-500);
--color-tertiary-soft:var(--gold-100);

--color-border:var(--brown-100);
--color-border-strong:var(--brown-300);

--color-link:var(--terracotta-500);
--color-link-hover:var(--terracotta-700);

--color-success:#6f8f5a;
--color-warning:var(--gold-700);
--color-danger:#b8503a;
}

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Caveat:wght@500;700&display=swap');
:root{
/* families */
--font-display:'Instrument Serif',Georgia,serif; /* headlines, pull quotes — set from the logo's warm, handmade spirit */
--font-body:'Karla',-apple-system,sans-serif; /* UI, captions, long-form copy */
--font-accent:'Caveat',cursive; /* sparing use only — signatures, tiny asides, echoes the logo's brush script; never for body copy */

/* sizes — 1.25 ratio type scale */
--text-xs:0.75rem;
--text-sm:0.875rem;
--text-base:1rem;
--text-md:1.125rem;
--text-lg:1.375rem;
--text-xl:1.75rem;
--text-2xl:2.25rem;
--text-3xl:3rem;
--text-4xl:4rem;
--text-5xl:5.5rem;

--leading-tight:1.1;
--leading-snug:1.3;
--leading-normal:1.55;
--leading-relaxed:1.7;

--tracking-tight:-0.01em;
--tracking-normal:0;
--tracking-wide:0.04em;
--tracking-wider:0.12em;
}

:root{
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.5rem;
--space-6:2rem;
--space-7:3rem;
--space-8:4rem;
--space-9:6rem;
--space-10:8rem;

--radius-sm:6px;
--radius-md:14px;
--radius-lg:24px;
--radius-pill:999px;

--shadow-sm:0 1px 3px rgba(58,36,32,0.08),0 1px 2px rgba(58,36,32,0.06);
--shadow-md:0 6px 20px rgba(58,36,32,0.10),0 2px 6px rgba(58,36,32,0.06);
--shadow-lg:0 16px 40px rgba(58,36,32,0.14),0 4px 12px rgba(58,36,32,0.08);

--border-width-hairline:1px;
--border-width-brush:2px;

--ease-standard:cubic-bezier(.25,.8,.35,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--color-text);background:var(--color-bg)}
a{color:var(--color-link)}
a:hover{color:var(--color-link-hover)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-accent);margin-bottom:10px}
header.site-header{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px;position:relative}
header.site-header .logo img{height:48px;width:auto}
nav.site-nav{display:flex;gap:32px}
nav.site-nav a{color:var(--color-text);text-decoration:none;font-size:var(--text-sm);font-weight:600}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.menu-toggle span{width:24px;height:2px;background:var(--color-text);display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:600;font-size:var(--text-base);padding:11px 22px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;transition:background var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);border:2px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--color-accent);color:var(--color-text-on-accent);border-color:var(--color-accent)}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-text-on-accent)}
.btn-secondary{background:transparent;color:var(--brown-700);border-color:var(--brown-700)}
.btn-secondary:hover{background:var(--brown-700);color:var(--cream-100)}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--brown-700);border-color:transparent;opacity:.5;cursor:not-allowed}

.hero{padding-top:60px;padding-bottom:100px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center}
.hero h1{margin:0 0 20px;font-family:var(--font-display);font-weight:400;font-size:var(--text-5xl);line-height:var(--leading-tight)}
.hero p{margin:0 0 36px;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--color-text-muted);max-width:480px}
.hero img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius-lg)}
.cta-row{display:flex;gap:16px;flex-wrap:wrap}

.about{background:var(--color-surface);padding:100px 0}
.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:64px;align-items:center}
.about img{width:100%;height:420px;object-fit:cover;border-radius:var(--radius-lg)}
.about h2{margin:0 0 20px;font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);line-height:var(--leading-tight)}
.about p{margin:0 0 16px;font-size:var(--text-base);line-height:var(--leading-relaxed);max-width:560px}

.quote{background:var(--brown-700);padding:100px 40px}
.quote-inner{max-width:760px;margin:0 auto;text-align:center}
.quote-inner p{margin:0 0 24px;font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);line-height:var(--leading-snug);color:var(--cream-100)}
.quote-sig{font-family:var(--font-accent);font-size:var(--text-xl);color:var(--gold-500)}

.collection-section{padding:100px 40px}
.section-head{margin-bottom:48px}
.section-head h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);line-height:var(--leading-tight)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);text-align:left;padding:0;font-family:var(--font-body);color:inherit;display:block;width:100%;border:none;cursor:pointer;transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:16px 18px 20px}
.card-title{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:4px}
.card-loc{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:10px}
.card-price{font-size:var(--text-base);font-weight:700;color:var(--color-accent)}

.contact{padding:100px 40px 60px;text-align:center}
.contact .eyebrow{text-align:center}
.contact h2{margin:0 0 20px;font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);line-height:var(--leading-tight)}
.social-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.social-link{color:var(--color-text);font-weight:600;font-size:var(--text-sm);text-decoration:none}

footer.site-footer{border-top:1px solid var(--color-border);padding:28px 40px;text-align:center;font-size:var(--text-xs);color:var(--color-text-muted)}

/* Modal (markup is static per-painting; JS only toggles visibility) */
.overlay{position:fixed;inset:0;background:rgba(44,28,24,0.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:100}
.overlay:target,.overlay.open{display:flex}
.modal{background:var(--color-surface);border-radius:var(--radius-lg);max-width:840px;width:100%;max-height:88vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;box-shadow:var(--shadow-lg);position:relative}
.modal img{width:100%;height:420px;object-fit:cover}
.modal-info{padding:28px 32px;position:relative;display:flex;flex-direction:column}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;color:var(--color-text-muted);cursor:pointer;line-height:1;text-decoration:none}
.modal-desc{margin:0 0 14px;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-muted)}
.offer-row{display:flex;gap:8px;margin-bottom:6px}
.offer-row input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.offer-row label{flex:1;border:2px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;cursor:pointer;font-family:var(--font-body)}
.offer-row input[type="radio"]:checked + label{border-color:var(--color-accent);background:var(--color-accent-soft)}
.offer-num{font-family:var(--font-display);font-size:var(--text-md);color:var(--brown-500);display:block}
.offer-label{font-size:var(--text-xs);font-weight:600;line-height:1.25;display:block;margin-top:2px;color:var(--color-text)}
.offer-note{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:14px;min-height:38px;display:none}
.offer-price{font-size:var(--text-xl);font-weight:700;color:var(--color-accent);margin-bottom:16px;display:none}
#offer-postcard:checked ~ .note-postcard,
#offer-wallprint:checked ~ .note-wallprint,
#offer-totebag:checked ~ .note-totebag,
#offer-postcard:checked ~ .price-postcard,
#offer-wallprint:checked ~ .price-wallprint,
#offer-totebag:checked ~ .price-totebag{display:block}
.buy-row{margin-top:auto;display:flex;flex-direction:column;gap:10px}

@media (max-width:900px){
  .hero,.about-grid{grid-template-columns:1fr}
  .hero img,.about img{height:320px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .modal{grid-template-columns:1fr}
  .modal img{height:260px}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  nav.site-nav{position:absolute;top:100%;left:0;right:0;background:var(--color-surface);flex-direction:column;gap:0;padding:8px 40px;box-shadow:var(--shadow-md);display:none}
  nav.site-nav.open{display:flex}
  nav.site-nav a{padding:12px 0;border-bottom:1px solid var(--color-border)}
  .menu-toggle{display:flex}
  .hero h1{font-size:var(--text-3xl)}
  .offer-row{flex-direction:column}
}