/* ============================================================
   Fast Global Goods — shared stylesheet (style.css)
   Used by ALL pages. Original styles kept 100% intact,
   plus a small "INNER PAGES" block at the very bottom.
   ============================================================ */
:root {
    --paper: #F4E9DF;
    --ink: #351D29;
    --clay: #A9364F;
    --brass: #D6A84B;
    --navy: #176D70;
    --rule: #DDC9C1;
    --mute: #866F75;
    --sheet: #FFFAF5;
    --spine: #351D29;
    --spine-ink: #F4E9DF;
    --shadow: 8px 8px 0 #351D29;

    --serif: 'Cormorant Garamond', Georgia, serif;
    --cond: 'Barlow Condensed', sans-serif;
    --sans: 'Figtree', system-ui, sans-serif;
}

[data-theme="dark"] {
    --paper: #191116;
    --ink: #F8EDE7;
    --clay: #FF7890;
    --brass: #EBC66D;
    --navy: #62C7C1;
    --rule: #49313B;
    --mute: #C0A5AC;
    --sheet: #261A21;
    --spine: #0C080B;
    --spine-ink: #F8EDE7;
    --shadow: 8px 8px 0 #050304;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 1rem }
html, body { margin: 0 }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
transition: background .4s, color .4s;
overflow-x: hidden
}
body.noscroll { overflow: hidden }
h1, h2, h3, h4, .serif {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -.02em
}
.cond {
font-family: var(--cond);
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600
}
a { color: inherit }
button, input, select, textarea { font-family: inherit }
::selection { background: var(--clay); color: #fff }
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background: var(--clay) }
::-webkit-scrollbar-track { background: transparent }
a { text-decoration: none; }

/* ===== SPINE NAV (always ink, like a book binding) ===== */
.spine {
position: fixed;
inset: 0 auto 0 0;
width: 188px;
background: var(--spine);
color: var(--spine-ink);
z-index: 1100;
display: flex;
flex-direction: column;
padding: 28px 22px 18px;
border-right: 1px solid color-mix(in srgb, var(--spine-ink) 18%, transparent);
}
.spine-logo {
text-decoration: none;
color: var(--spine-ink);
display: block;
margin-bottom: 28px
}
.spine-logo .mark {
font-family: var(--serif);
font-style: italic;
font-size: 1.45rem;
line-height: 1;
display: block
}
.spine-logo small {
font-family: var(--cond);
letter-spacing: .28em;
font-size: .62rem;
opacity: .55
}
.spine-links {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1
}
.spine-links a {
color: color-mix(in srgb, var(--spine-ink) 62%, transparent);
text-decoration: none;
font-family: var(--cond);
letter-spacing: .16em;
text-transform: uppercase;
font-size: .78rem;
padding: 9px 0;
border-top: 1px solid color-mix(in srgb, var(--spine-ink) 12%, transparent);
display: flex;
justify-content: space-between;
align-items: center;
transition: .25s;
}
.spine-links a:hover,
.spine-links a.on {
color: var(--spine-ink);
padding-left: 6px
}
.spine-links a.on::after {
content: "";
width: 18px;
height: 1px;
background: var(--clay)
}
.spine-tools {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 18px
}
.spine-tools button {
background: transparent;
border: 1px solid color-mix(in srgb, var(--spine-ink) 22%, transparent);
color: var(--spine-ink);
height: 42px;
position: relative;
transition: .2s;
}
.spine-tools button:hover {
background: var(--spine-ink);
color: var(--spine)
}
.spine-tools .cnt {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(--clay);
color: #fff;
font-size: .62rem;
font-family: var(--cond);
display: grid;
place-items: center;
}
.canvas { margin-left: 188px }

/* mobile topbar */
.mobar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1090;
height: 58px;
background: var(--spine);
color: var(--spine-ink);
padding: 0 16px;
align-items: center;
justify-content: space-between;
}

/* ===== BUTTONS ===== */
.btn-ink,
.btn-ghost,
.btn-clay {
display: inline-flex;
align-items: center;
gap: .5rem;
border: 1px solid var(--ink);
padding: .85rem 1.4rem;
font-family: var(--cond);
letter-spacing: .16em;
text-transform: uppercase;
font-size: .82rem;
text-decoration: none;
transition: .25s;
background: var(--ink);
color: var(--paper);
border-radius: 0;
}
.btn-ink:hover {
background: var(--clay);
border-color: var(--clay);
color: #fff;
transform: translate(-3px, -3px);
box-shadow: var(--shadow)
}
.btn-ghost {
background: transparent;
color: var(--ink)
}
.btn-ghost:hover {
background: var(--ink);
color: var(--paper)
}
.btn-clay {
background: var(--clay);
border-color: var(--clay);
color: #fff
}
.btn-clay:hover {
background: var(--ink);
border-color: var(--ink);
color: var(--paper)
}

/* ===== HERO ===== */
#hero {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(320px, 1.05fr) minmax(280px, .95fr);
background: var(--paper)
}
.hero-copy {
padding: 7vh 6vw 6vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden
}
.kicker {
font-family: var(--cond);
letter-spacing: .32em;
font-size: .72rem;
color: var(--clay);
margin-bottom: 18px
}
.mast {
font-size: clamp(2.6rem, 6.2vw, 5.2rem);
line-height: 0.9;
margin: 0 0 18px
}
.mast em { font-style: italic; color: var(--clay) }
.lede {
color: var(--mute);
max-width: 38rem;
font-size: 1.02rem;
line-height: 1.65;
margin-bottom: 28px
}
.rule {
height: 1px;
background: var(--rule);
border: 0;
margin: 28px 0
}
.idx {
font-family: var(--cond);
letter-spacing: .2em;
font-size: .75rem;
color: var(--brass)
}
.p-cat {
font-family: var(--cond);
letter-spacing: .22em;
font-size: .72rem;
color: var(--clay);
margin: 10px 0 6px
}
.p-name {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.7rem);
line-height: .95;
margin: 0 0 8px
}
.p-price {
font-family: var(--cond);
font-size: 1.8rem;
letter-spacing: .08em;
color: var(--clay)
}
.p-desc {
color: var(--mute);
max-width: 34rem;
margin: 10px 0 22px;
line-height: 1.6
}
.swap { animation: wipe .55s cubic-bezier(.2, .7, .2, 1) both }
@keyframes wipe {
from { opacity: 0; clip-path: inset(12% 0 40% 0); transform: translateY(18px) }
to { opacity: 1; clip-path: inset(0); transform: none }
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 26px;
font-family: var(--cond);
letter-spacing: .14em;
font-size: .75rem;
color: var(--mute)
}
.badges span { display: flex; align-items: center; gap: 6px }
.badges i { color: var(--clay) }
.hero-rail {
height: 100vh;
overflow: hidden;
position: relative;
border-left: 1px solid var(--rule);
background: var(--sheet)
}
.hero-rail:before,
.hero-rail:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 70px;
z-index: 2;
pointer-events: none;
}
.hero-rail:before { top: 0; background: linear-gradient(var(--sheet), transparent) }
.hero-rail:after { bottom: 0; background: linear-gradient(transparent, var(--sheet)) }
.rail-track { display: flex; flex-direction: column }
.rail-item {
position: relative;
height: 52vh;
min-height: 320px;
cursor: pointer;
flex-shrink: 0;
overflow: hidden
}
.rail-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(.55) contrast(1.05);
transform: scale(1.04);
transition: filter .6s, transform 1.2s
}
.rail-item.is-on img,
.rail-item:hover img {
filter: none;
transform: scale(1)
}
.rail-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px 20px;
background: linear-gradient(transparent, rgba(16, 12, 10, .72));
color: #f3eadc;
transform: translateY(8px);
opacity: .0;
transition: .35s;
}
.rail-item.is-on .rail-cap,
.rail-item:hover .rail-cap {
opacity: 1;
transform: none
}
.rail-cap b {
display: block;
font-family: var(--serif);
font-size: 1.25rem;
font-weight: 600
}
.rail-cap small { font-family: var(--cond); letter-spacing: .16em }
.focus-line {
position: absolute;
left: 0;
right: 0;
top: 38%;
height: 1px;
background: var(--clay);
z-index: 3;
opacity: .55;
pointer-events: none
}
.focus-line span {
position: absolute;
right: 12px;
top: -9px;
background: var(--clay);
color: #fff;
font-family: var(--cond);
font-size: .62rem;
letter-spacing: .14em;
padding: 2px 7px
}

/* ===== SHARED SECTION CHROME ===== */
.sec { padding: 7.5rem 4.5vw }
.sec-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 2.8rem;
border-bottom: 1px solid var(--rule);
padding-bottom: 1.2rem
}
.sec-k {
font-family: var(--cond);
letter-spacing: .28em;
font-size: .72rem;
color: var(--clay)
}
.sec-h {
font-size: clamp(2.2rem, 4.6vw, 3.6rem);
margin: 6px 0 0;
line-height: .95
}
.numgiant {
font-family: var(--serif);
font-style: italic;
font-size: clamp(4rem, 10vw, 8rem);
line-height: .8;
color: var(--clay);
opacity: .85
}

/* ABOUT — manifesto / definitions, not cards */
#about {
background: var(--sheet);
border-block: 1px solid var(--rule)
}
.manifesto {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 4vw;
align-items: start
}
.defs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0
}
.defs article {
padding: 22px 22px 22px 0;
border-top: 1px solid var(--rule)
}
.defs .ic { font-size: 1.2rem; color: var(--clay) }
.defs h5 {
font-family: var(--cond);
letter-spacing: .14em;
text-transform: uppercase;
font-size: .9rem;
margin: 8px 0 6px
}
.defs p {
color: var(--mute);
font-size: .92rem;
margin: 0;
line-height: 1.55
}

/* CATEGORIES — expanding type index */
#categories .cat-row {
display: grid;
grid-template-columns: 80px 1fr auto auto;
gap: 18px;
align-items: center;
padding: 0 0;
border-bottom: 1px solid var(--rule);
cursor: pointer;
position: relative;
overflow: hidden;
min-height: 86px;
transition: min-height .45s cubic-bezier(.2, .7, .2, 1), background .35s;
}
#categories .cat-row:hover {
min-height: 128px;
background: color-mix(in srgb, var(--clay) 8%, transparent)
}
#categories .cat-row .n {
font-family: var(--cond);
color: var(--brass);
letter-spacing: .12em
}
#categories .cat-row h3 {
font-family: var(--serif);
font-size: clamp(1.6rem, 3vw, 2.6rem);
margin: 0;
transition: .35s
}
#categories .cat-row:hover h3 {
padding-left: 12px;
font-style: italic
}
#categories .cat-row .count {
font-family: var(--cond);
letter-spacing: .12em;
color: var(--mute)
}
#categories .cat-row .go {
font-family: var(--cond);
letter-spacing: .16em;
text-transform: uppercase;
font-size: .78rem;
color: var(--clay);
opacity: 0;
transform: translateX(-8px);
transition: .3s
}
#categories .cat-row:hover .go {
opacity: 1;
transform: none
}
.cat-ghost {
position: absolute;
right: 8%;
top: 50%;
width: 140px;
height: 90px;
object-fit: cover;
opacity: 0;
transform: translate(20px, -50%) rotate(6deg);
transition: .4s;
filter: grayscale(.3);
pointer-events: none
}
#categories .cat-row:hover .cat-ghost {
opacity: .9;
transform: translate(0, -50%) rotate(-4deg)
}

/* FEATURED — lookbook index */
#featured {
background: var(--ink);
color: var(--paper);
padding: 0
}
[data-theme="dark"] #featured { background: #0c0b0a }
.look {
display: grid;
grid-template-columns: 1fr 1.15fr;
min-height: 88vh
}
.look-index {
padding: 7vh 4vw;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid color-mix(in srgb, var(--paper) 16%, transparent)
}
.look-item {
display: flex;
align-items: baseline;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
cursor: pointer
}
.look-item .ln {
font-family: var(--cond);
opacity: .4;
letter-spacing: .14em;
min-width: 2ch
}
.look-item h4 {
font-family: var(--serif);
font-size: clamp(1.3rem, 2.2vw, 2rem);
margin: 0;
font-weight: 500;
transition: .3s
}
.look-item.is-on h4,
.look-item:hover h4 {
font-style: italic;
color: var(--clay);
padding-left: 8px
}
.look-stage {
position: relative;
overflow: hidden;
background: #111
}
.look-stage img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
inset: 0;
animation: ken 8s ease-in-out infinite alternate
}
@keyframes ken {
from { transform: scale(1) }
to { transform: scale(1.08) }
}
.look-stage .veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .7))
}
.look-meta {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
color: #fff;
z-index: 2
}
.look-meta .cat {
font-family: var(--cond);
letter-spacing: .22em;
font-size: .72rem;
color: var(--brass)
}
.look-meta h3 {
font-family: var(--serif);
font-size: clamp(1.8rem, 3vw, 2.8rem);
margin: 6px 0
}
.clipin { animation: clipin .7s cubic-bezier(.2, .7, .2, 1) both }
@keyframes clipin {
from { clip-path: inset(0 40% 0 40%); filter: grayscale(1) }
to { clip-path: inset(0); filter: none }
}

/* PRODUCTS — inventory ledger */
#products { background: var(--paper) }
.ledger-tools {
display: grid;
grid-template-columns: 1.4fr .7fr auto;
gap: 16px;
align-items: end;
margin-bottom: 18px
}
.u-input,
.u-select {
background: transparent;
border: none;
border-bottom: 1px solid var(--ink);
border-radius: 0;
color: var(--ink);
padding: .6rem 0;
width: 100%;
}
.u-input:focus,
.u-select:focus {
outline: none;
border-bottom-color: var(--clay);
box-shadow: none;
background: transparent;
color: var(--ink)
}
.slash-nav {
display: flex;
flex-wrap: wrap;
gap: 6px 4px;
align-items: center;
margin: 10px 0 28px;
font-family: var(--cond);
letter-spacing: .1em;
text-transform: uppercase;
font-size: .82rem
}
.slash-nav button {
background: none;
border: none;
color: var(--mute);
padding: 4px 6px
}
.slash-nav button.on,
.slash-nav button:hover { color: var(--clay) }
.slash-nav .div { opacity: .35; padding: 0 2px }
.ledger {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 0;
border: 1px solid var(--rule);
min-height: 70vh;
background: var(--sheet)
}
.inspector {
padding: 28px;
border-right: 1px solid var(--rule);
position: sticky;
top: 0;
align-self: start;
min-height: 100vh
}
.inspector img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
filter: grayscale(.15);
margin-bottom: 18px
}
.inv { overflow: auto; max-height: 80vh }
.inv-row {
display: grid;
grid-template-columns: 48px 52px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--rule);
cursor: pointer;
transition: .2s;
}
.inv-row:hover,
.inv-row.on { background: color-mix(in srgb, var(--clay) 9%, transparent) }
.inv-row.on { box-shadow: inset 3px 0 0 var(--clay) }
.inv-row img { width: 52px; height: 52px; object-fit: cover }
.inv-row .nm {
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1.15
}
.inv-row .ct {
font-size: .72rem;
color: var(--mute);
font-family: var(--cond);
letter-spacing: .12em
}
.inv-row .pr {
font-family: var(--cond);
letter-spacing: .08em;
color: var(--clay);
font-size: 1.05rem
}
.iconx {
background: none;
border: 1px solid var(--rule);
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--ink)
}
.iconx:hover { border-color: var(--clay); color: var(--clay) }
.iconx.loved {
background: var(--clay);
color: #fff;
border-color: var(--clay)
}

/* WHY — horizontal chapters */
#why {
background: var(--sheet);
border-block: 1px solid var(--rule);
padding-bottom: 0
}
.chapters {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 0;
border-top: 1px solid var(--rule)
}
.chapter {
min-width: min(86vw, 380px);
scroll-snap-align: start;
padding: 48px 36px 64px;
border-right: 1px solid var(--rule)
}
.chapter .n {
font-family: var(--serif);
font-style: italic;
font-size: 4.5rem;
color: var(--clay);
line-height: 1
}
.chapter h3 {
font-family: var(--serif);
font-size: 1.7rem;
margin: 8px 0 12px
}
.chapter p {
color: var(--mute);
margin: 0;
line-height: 1.6
}

/* FAQ */
.accordion-item {
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
border-radius: 0
}
.accordion-button {
background: transparent;
color: var(--ink);
font-family: var(--serif);
font-size: 1.25rem;
box-shadow: none !important;
padding: 1.15rem 0
}
.accordion-button:not(.collapsed) {
background: transparent;
color: var(--clay)
}
.accordion-button::after { filter: var(--acc, none) }
[data-theme="dark"] .accordion-button::after { filter: invert(1) }
.accordion-body {
color: var(--mute);
padding: 0 0 1.2rem
}

/* NEWSLETTER — newspaper dispatch */
.news-sheet {
display: grid;
grid-template-columns: 1fr 1.1fr;
border: 1px solid var(--ink);
background: var(--sheet)
}
.news-left {
padding: 48px 40px;
background: var(--ink);
color: var(--paper)
}
.news-left h2 {
color: var(--paper);
font-size: clamp(2rem, 3.5vw, 3rem)
}
.news-right { padding: 40px }

/* CONTACT */
.contact-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 4vw
}
.info-line {
display: grid;
grid-template-columns: 120px 1fr;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
font-size: .95rem
}
.info-line b {
font-family: var(--cond);
letter-spacing: .14em;
text-transform: uppercase;
font-size: .72rem;
color: var(--clay);
font-weight: 600
}
.mapframe {
height: 240px;
border: 1px solid var(--rule);
margin-top: 18px;
filter: grayscale(.5) contrast(1.1)
}
.mapframe iframe {
width: 100%;
height: 100%;
border: 0
}

/* FOOTER */
footer {
background: var(--spine);
color: var(--spine-ink);
padding: 64px 4.5vw 28px;
margin-left: 188px
}
footer a {
color: color-mix(in srgb, var(--spine-ink) 75%, transparent);
text-decoration: none
}
footer a:hover { color: #fff }
footer h6 {
font-family: var(--cond);
letter-spacing: .18em;
text-transform: uppercase;
font-size: .78rem;
margin-bottom: 16px
}
.foot-rule {
height: 1px;
background: color-mix(in srgb, var(--spine-ink) 16%, transparent);
margin: 28px 0 16px
}

/* CART / WISH / MODALS */
.offcanvas {
background: var(--paper);
color: var(--ink);
border-left: 1px solid var(--ink)
}
.offcanvas-header,
.modal-header,
.modal-footer { border-color: var(--rule) !important }
.modal-content {
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
border-radius: 0
}
.form-control,
.form-select {
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
border-radius: 0;
color: var(--ink)
}
.form-control:focus,
.form-select:focus {
background: transparent;
color: var(--ink);
border-color: var(--clay);
box-shadow: none
}
.cart-line {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
align-items: center
}
.cart-line img { width: 64px; height: 64px; object-fit: cover }
.qtybox { display: inline-flex; border: 1px solid var(--rule) }
.qtybox button {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--ink)
}
.related {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px
}
.related article { cursor: pointer }
.related img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
filter: grayscale(.3)
}
.related article:hover img { filter: none }
.related small {
display: block;
font-family: var(--serif);
font-size: .85rem;
margin-top: 6px;
line-height: 1.2
}

/* DISPATCH NOTES (alerts) */
#notes {
position: fixed;
left: 204px;
bottom: 20px;
z-index: 3000;
display: flex;
flex-direction: column;
gap: 10px;
width: min(340px, calc(100vw - 40px))
}
.note {
background: var(--sheet);
border: 1px solid var(--ink);
box-shadow: var(--shadow);
padding: 14px 14px 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: start;
animation: stamp .5s cubic-bezier(.18, 1.1, .3, 1) both;
}
.note.out { animation: unstamp .35s ease forwards }
@keyframes stamp {
from { opacity: 0; transform: translateY(80px) rotate(-4deg) }
to { opacity: 1; transform: none }
}
@keyframes unstamp {
to { opacity: 0; transform: translateY(40px) rotate(3deg) }
}
.stamp {
width: 36px;
height: 36px;
border: 1.5px solid var(--clay);
color: var(--clay);
border-radius: 50%;
display: grid;
place-items: center;
font-size: .9rem;
transform: rotate(-12deg)
}
.note b {
font-family: var(--serif);
display: block;
font-size: 1.05rem
}
.note p {
margin: 2px 0 0;
font-size: .82rem;
color: var(--mute)
}
.note .bar {
grid-column: 1/-1;
height: 2px;
background: var(--clay);
transform-origin: left;
animation: drain 3.8s linear forwards
}
@keyframes drain { to { transform: scaleX(0) } }
#toTop {
position: fixed;
right: 18px;
bottom: 18px;
width: 44px;
height: 44px;
background: var(--ink);
color: var(--paper);
border: none;
opacity: 0;
pointer-events: none;
transition: .3s;
z-index: 900
}
#toTop.on { opacity: 1; pointer-events: auto }

@media(max-width:1100px) {
.spine { transform: translateX(-100%); transition: .35s }
.spine.open { transform: none }
.canvas, footer { margin-left: 0 }
.mobar { display: flex }
#hero { grid-template-columns: 1fr; min-height: auto }
.hero-copy { padding: 86px 22px 40px }
.hero-rail { height: 62vh }
.manifesto, .look, .ledger, .news-sheet, .contact-grid, .ledger-tools { grid-template-columns: 1fr }
.inspector { position: relative; border-right: none; border-bottom: 1px solid var(--rule) }
#notes { left: 16px }
.related { grid-template-columns: repeat(2, 1fr) }
#featured .look { min-height: auto }
.look-stage { min-height: 52vh }
}

/* ============================================================
   INNER PAGES (about / product / contact / subscribe /
   unsubscribe / checkout / policy pages)
   ============================================================ */
.page-head {
padding: 120px 4.5vw 34px;
border-bottom: 1px solid var(--rule);
background: var(--paper)
}
.page-head .sec-h { margin: 6px 0 0; line-height: .95 }
.page-note {
color: var(--mute);
max-width: 46rem;
margin: 14px 0 0;
line-height: 1.65
}
.policy-body { max-width: 880px }
.policy-body h6 {
font-family: var(--cond);
letter-spacing: .16em;
text-transform: uppercase;
font-size: .86rem;
color: var(--clay);
font-weight: 600;
margin: 1.7rem 0 .45rem
}
.policy-body p {
color: var(--mute);
line-height: 1.72;
margin: 0 0 .4rem;
font-size: .98rem
}
.policy-tag {
display: inline-block;
font-family: var(--cond);
letter-spacing: .22em;
font-size: .72rem;
color: var(--clay);
border: 1px solid var(--clay);
padding: 6px 12px;
margin-bottom: 20px
}
.info-card {
border: 1px solid var(--rule);
background: var(--sheet);
padding: 28px
}
@media(max-width:1100px) {
.page-head { padding-top: 110px }
}