/* ============================================================
   HIGH SOCIETY — Doniphan, MO
   Tokens derived from the shop's own brand: fixture black,
   wall white, humidor amber, window-vinyl serif lockup.
   ============================================================ */

:root {
    --ink:        #16130F;
    --ink-soft:   #241F19;
    --paper:      #F6F3ED;
    --paper-dim:  #ECE7DD;
    --amber:      #C98A3B;
    --amber-hi:   #E3A959;
    --cedar:      #7A5230;
    --smoke:      #8C8578;
    --open:       #7BA05B;

    --display: 'Marcellus', 'Times New Roman', serif;
    --body:    'Crimson Pro', Georgia, serif;

    --track: 0.28em;   /* the lockup letterspacing */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    font-family: var(--body);
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--cedar); }
a:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.wrap.narrow { max-width: 720px; }

/* ---------- shared type ---------- */

h1, h2, h3 { font-family: var(--display); font-weight: 400; }

.eyebrow {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: var(--track);
    font-size: 0.85rem;
    color: var(--cedar);
    margin-bottom: 0.75rem;
}
.eyebrow.centered { text-align: center; }

/* ---------- the flourish (window-vinyl divider) ---------- */

.flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.1rem auto;
    max-width: 340px;
}
.flourish span { flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
.flourish i {
    width: 9px; height: 9px;
    background: currentColor;
    transform: rotate(45deg);
    margin: 0 10px;
    flex: none;
}
.flourish.dark { color: var(--ink); }

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

.hero {
    background: var(--ink);
    color: var(--paper);
    text-align: center;
}

.hero-lockup { padding: 4.5rem 1.5rem 3rem; }

.hero .est {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: var(--amber);
    margin-bottom: 1.6rem;
}

.hero h1 {
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    text-transform: uppercase;
    letter-spacing: var(--track);
    /* nudge: tracked caps look off-center without a compensating indent */
    padding-left: var(--track);
    color: var(--paper);
}

.hero .flourish { color: var(--paper); max-width: 420px; }

.hero .tagline {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    padding-left: 0.22em;
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    color: var(--paper-dim);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.6rem;
    font-size: 1.05rem;
    border: 1px solid rgba(246, 243, 237, 0.25);
    border-radius: 999px;
    padding: 0.35rem 1.1rem;
}
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--smoke); }
.status.is-open .dot { background: var(--open); box-shadow: 0 0 8px var(--open); }
.status.is-closed .dot { background: var(--amber); }

.hero-actions {
    margin-top: 1.8rem;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.85rem 1.7rem;
    border-radius: 2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--amber-hi); }
.btn-ghost { border: 1px solid rgba(246,243,237,0.4); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); }

.hero-addr { margin-top: 1.4rem; color: var(--smoke); font-size: 1rem; }

.hero-photo img {
    width: 100%;
    /* height scales with viewport width so ultrawide monitors keep a
       proportional slice of the photo instead of a thin center band */
    max-height: clamp(420px, 30vw, 720px);
    object-fit: cover;
    /* anchor the crop to the top of the photo: the HIGH SOCIETY window
       vinyl lives in the upper band, and ultra-wide viewports crop the
       image vertically — center-anchoring loses the name entirely. */
    object-position: center top;
}

/* ---------- shopkeep ---------- */

.shopkeep { padding: 4.5rem 0; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: center;
}

.portrait img {
    border: 1px solid var(--ink);
    box-shadow: 10px 10px 0 var(--amber);
}

.shopkeep h2, .findus h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.25;
    margin-bottom: 1.1rem;
}

.shopkeep p + p { margin-top: 1rem; }

.promise {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--cedar);
    border-left: 3px solid var(--amber);
    padding-left: 1.1rem;
}

/* ---------- cases ---------- */

.cases { padding: 3.5rem 0 0; }

.case-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 1.5rem;
}
.case-row.reverse .case-photo { order: 2; }
.case-row.reverse .case-copy  { order: 1; }

.case-copy h3 {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.8rem;
}

.case-photo img { border: 1px solid var(--ink-soft); }

/* the humidor: dark band, amber edge-glow like the cabinet lighting */
.humidor {
    background: var(--ink);
    color: var(--paper);
    border-top: 1px solid var(--amber);
    border-bottom: 1px solid var(--amber);
}
.humidor .case-copy h3 { color: var(--amber-hi); }
.humidor p { color: var(--paper-dim); }
.case-photo.glow img {
    border: 1px solid var(--amber);
    box-shadow: 0 0 34px rgba(201, 138, 59, 0.35);
}

/* ---------- featured ---------- */

.featured { padding: 4rem 0 1rem; }

.featured-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ink);
    box-shadow: 8px 8px 0 var(--paper-dim);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.75rem;
    padding: 2.25rem 2.5rem;
    align-items: center;
}
.featured-card img { max-width: 220px; }
.featured-card h3 { font-size: 1.9rem; }
.featured-card .price {
    font-family: var(--display);
    font-size: 1.6rem;
    color: var(--cedar);
    margin: 0.35rem 0 0.7rem;
}
.featured-card p { font-size: 1.3rem; }

/* ---------- announcements ---------- */

.announcements { padding: 3.5rem 0 1rem; }

.board { list-style: none; }
.board li {
    padding: 1.1rem 0 1.1rem 1.8rem;
    position: relative;
    border-bottom: 1px solid var(--paper-dim);
    font-size: 1.4rem;
}
.board li::before {
    content: '';
    position: absolute;
    left: 0; top: 1.75rem;
    width: 7px; height: 7px;
    background: var(--amber);
    transform: rotate(45deg);
}

/* ---------- find us ---------- */

.findus { padding: 4.5rem 0; }

.findus address { font-style: normal; font-size: 1.3rem; margin-bottom: 0.6rem; }
.find-phone { margin-bottom: 1.6rem; font-size: 1.2rem; }
.find-phone a { color: var(--ink); }

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
    text-align: left;
    padding: 0.65rem 0.4rem;
    border-bottom: 1px solid var(--paper-dim);
    font-weight: 400;
}
.hours th { font-family: var(--display); letter-spacing: 0.06em; }
.hours td { text-align: right; }
.hours tr.today th, .hours tr.today td {
    color: var(--cedar);
    font-weight: 600;
    border-bottom-color: var(--amber);
}

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

footer {
    background: var(--ink);
    color: var(--smoke);
    text-align: center;
    padding: 3rem 0 2.5rem;
}
footer .flourish.dark { color: var(--amber); }
.agegate {
    font-family: var(--display);
    color: var(--paper);
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}
.smallprint { font-size: 0.95rem; }
.smallprint.credit { margin-top: 0.4rem; }

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

@media (max-width: 800px) {
    .two-col, .case-row { grid-template-columns: 1fr; gap: 1.8rem; }
    .case-row.reverse .case-photo { order: 0; }
    .case-row.reverse .case-copy  { order: 0; }
    .portrait { max-width: 380px; }
    .featured-card { grid-template-columns: 1fr; text-align: center; }
    .featured-card img { margin: 0 auto; }
    .hero-lockup { padding-top: 3.2rem; }
}