:root { color-scheme: dark; font-family: "Manrope", sans-serif; color: #eee9df; background: #11130f; font-synthesis: none; --ink: #11130f; --forest: #1b211a; --moss: #7d8973; --stone: #c9bba6; --clay: #a87456; --paper: #eee9df; --line: rgba(238,233,223,.17); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); }
.admin-bar .gear-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gear-header { top: 46px; } .admin-bar .detail-hero__back { top: 137px; } }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.gear-header { position: fixed; z-index: 30; inset: 0 0 auto; display: flex; min-height: 94px; align-items: center; justify-content: space-between; padding: 0 clamp(22px,3vw,48px); border-bottom: 1px solid var(--line); background: rgba(17,19,15,.91); transition: min-height 300ms ease, background-color 300ms ease; backdrop-filter: blur(16px); }
.gear-header.is-scrolled { min-height: 66px; background: rgba(17,19,15,.97); }
.gear-brand { display: flex; align-items: center; gap: 12px; font-family: "Barlow Condensed", sans-serif; font-size: 19pt; font-weight: 600; letter-spacing: -.035em; }
.gear-brand > span:last-child em { color: var(--stone); font-weight: inherit; }
.gear-brand__mascot { display:block; width:46px; height:50px; flex:0 0 auto; object-fit:contain; }
.gear-nav { display: flex; align-items: center; gap: clamp(24px,3vw,46px); font-size: 8pt; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.gear-nav a { color: rgba(238,233,223,.65); }
.gear-nav a:hover, .gear-nav a.is-active { color: var(--paper); }
.gear-menu-toggle { display: none; }
.detail-hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(360px,.97fr) minmax(0,1.03fr); padding-top: 92px; overflow: hidden; }
.detail-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(48px,7vw,108px) clamp(30px,6vw,92px) clamp(44px,6vw,80px); background: var(--ink); }
.detail-hero__back { position: fixed; z-index: 22; top: 112px; left: 26px; display: grid; width: 42px; height: 42px; place-items: center; color: #78644f; border: 1px solid rgba(41,55,43,.22); border-radius: 50%; background: rgba(238,233,223,.78); box-shadow: 0 8px 28px rgba(41,55,43,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12pt; transition: color 180ms ease,background-color 180ms ease,transform 180ms ease; }
.detail-hero__back:hover,.detail-hero__back:focus-visible { color: var(--ink); background: rgba(238,233,223,.96); transform: translateX(-2px); }
.detail-hero__back-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.admin-bar .detail-hero__back { top: 144px; }
.detail-hero__eyebrow { margin: auto 0 36px; color: var(--moss); font-size: 7pt; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.detail-hero h1 { max-width: 100%; margin: 0; padding: .05em 0 .1em; overflow: visible; font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(70pt,11vw,132pt), 1pt); font-weight: 500; line-height: .82; letter-spacing: -.052em; overflow-wrap: anywhere; text-transform: uppercase; }
.detail-hero h1.is-long { max-width: 100%; font-size: round(up, clamp(60pt,8.5vw,102pt), 1pt); white-space: normal; }
.gear-title-reveal { opacity: 0; filter: blur(8px); clip-path: inset(0 0 100% 0); transform: translate3d(0,18px,0); transform-origin: left bottom; transition:opacity 900ms cubic-bezier(.22,1,.36,1),filter 900ms cubic-bezier(.22,1,.36,1),clip-path 900ms cubic-bezier(.22,1,.36,1),transform 900ms cubic-bezier(.22,1,.36,1); will-change:opacity,filter,clip-path,transform; }
.gear-title-reveal.is-visible { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: none; will-change:auto; }
.detail-hero__subtitle { max-width: 100%; margin: 35px 0 0; color: rgba(238,233,223,.62); font-family: "Newsreader", Georgia, serif; font-size: round(up, clamp(15pt,2vw,21pt), 1pt); font-style: italic; line-height: 1.35; overflow-wrap: anywhere; }
.detail-hero__stats { display: flex; gap: 30px; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--line); color: rgba(238,233,223,.48); font-size: 7pt; letter-spacing: .15em; text-transform: uppercase; }
.detail-hero__stats span:first-child { color: var(--stone); }
.detail-hero__image { position: relative; min-height: 620px; margin: 14px 14px 14px 0; overflow: hidden; border-radius: 20px; background: var(--forest); }
.detail-hero__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(17,19,15,.08), rgba(17,19,15,.48)); }
.detail-hero__image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-hero__image p { position: absolute; z-index: 1; right: 28px; bottom: 24px; margin: 0; font-size: 7pt; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.inventory { display: grid; grid-template-columns: minmax(190px,.55fr) minmax(0,1.45fr); gap: clamp(50px,8vw,130px); padding: clamp(100px,14vw,180px) clamp(28px,9vw,145px); background: linear-gradient(180deg,#dbe3d8 0,var(--paper) 110px,var(--paper) 100%); color: var(--ink); }
.inventory__aside { align-self: start; position: sticky; top: 110px; }
.inventory__aside p { margin: 0 0 18px; color: #725f4d; font-size: 7pt; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.inventory__aside h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(39pt,6vw,72pt), 1pt); font-weight: 500; line-height: .85; text-transform: uppercase; }
.inventory__aside a { display: inline-flex; margin-top: 35px; padding-bottom: 7px; border-bottom: 1px solid rgba(17,19,15,.45); font-size: 7pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gear-article > p:first-child { margin-top: 0; font-family: "Newsreader", Georgia, serif; font-size: round(up, clamp(19pt,2.5vw,27pt), 1pt); line-height: 1.38; }
.gear-article p { max-width: 780px; color: rgba(17,19,15,.67); font-size: 13pt; line-height: 1.85; }
.gear-article h2, .gear-article h3 { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 85px 0 25px; font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(36pt,5vw,64pt), 1pt); font-weight: 500; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; }
.gear-category-total { flex: 0 0 auto; padding-bottom: 7px; color: #725f4d; font-family: "Manrope", sans-serif; font-size: 7pt; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; }
.gear-article ul, .gear-article ol { margin: 0; padding: 0; list-style: none; counter-reset: gear-item; border-top: 1px solid rgba(17,19,15,.14); }
.gear-article li { position: relative; min-height: 62px; padding: 19px 0 19px 62px; color: rgba(17,19,15,.64); border-bottom: 1px solid rgba(17,19,15,.14); font-size: 10pt; line-height: 1.65; counter-increment: gear-item; }
.gear-article li::before { position: absolute; top: 19px; left: 0; width: 42px; content: counter(gear-item, decimal-leading-zero); color: #8d7763; font-family: "Barlow Condensed", sans-serif; font-size: 12pt; }
.gear-article strong { color: var(--ink); font-weight: 600; }
.gear-article a { text-decoration: underline; text-decoration-color: rgba(114,95,77,.4); text-underline-offset: 3px; }
.gear-article li.gear-item--weighted { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: start; }
.gear-item__main { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.gear-item__main > a, .gear-item__main > strong { width: fit-content; color: var(--ink); font-weight: 600; }
.gear-item__description { color: rgba(17,19,15,.52); font-size: 10pt; }
.gear-item__weight { min-width: 78px; padding: 4px 8px; color: #725f4d; border: 1px solid rgba(114,95,77,.24); border-radius: 999px; font-family: "Barlow Condensed", sans-serif; font-size: 10pt; letter-spacing: .06em; text-align: center; white-space: nowrap; }
.gear-article li.gear-item--has-weight { padding-right: 115px; }
.gear-item__weight--inferred { position: absolute; top: 19px; right: 0; }
.gear-article hr { display: none; }
.gear-article p:empty, .gear-article hr + hr { display: none; }
.gear-grand-total { display: grid; margin-top: 110px; padding: 42px 0 0; border-top: 2px solid var(--ink); }
.gear-grand-total > span { color: #725f4d; font-size: 7pt; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gear-grand-total strong { margin-top: 16px; font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(60pt,9vw,108pt), 1pt); font-weight: 500; line-height: .8; letter-spacing: -.045em; }
.gear-grand-total p { margin: 22px 0 0; color: rgba(17,19,15,.5); font-size: 9pt; letter-spacing: .08em; text-transform: uppercase; }
.next-list { position: relative; isolation: isolate; display: flex; min-height: 440px; align-items: flex-end; justify-content: space-between; gap: 30px; padding: clamp(45px,7vw,100px); overflow: hidden; background: var(--next-image) center 50% / cover; }
.next-list::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(17,19,15,.94), rgba(17,19,15,.34)); }
.next-list span { color: var(--stone); font-size: 7pt; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.next-list strong { display: block; margin-top: 18px; font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(54pt,10vw,120pt), 1pt); font-weight: 500; line-height: .72; letter-spacing: -.05em; text-transform: uppercase; }
.next-list i { display: grid; width: 70px; height: 70px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(238,233,223,.55); border-radius: 50%; font-size: 16pt; font-style: normal; }
.detail-footer { display: flex; height: 180px; align-items: center; justify-content: space-between; gap: 30px; padding: 40px clamp(24px,5vw,80px); border-top: 1px solid var(--line); }
.detail-footer p { margin: 0; color: rgba(238,233,223,.45); font-family: "Newsreader", Georgia, serif; font-style: italic; }
:focus-visible { outline: 2px solid var(--stone); outline-offset: 4px; }
@media (max-width: 900px) { .detail-hero { grid-template-columns: 1fr; } .detail-hero__copy { min-height: 720px; } .detail-hero__image { min-height: 72vw; margin: 0 14px 14px; } .inventory { grid-template-columns: 1fr; } .inventory__aside { position: static; } }
@media (max-width: 760px) { .gear-header { min-height: 78px; padding-inline: 20px; } .gear-brand { font-size: 17pt; } .gear-brand__mascot { width:39px; height:42px; } .gear-menu-toggle { position: fixed; z-index: 33; top: 22px; right: 20px; display: grid; grid-template-columns: auto 27px; align-items: center; gap: 3px 11px; padding: 8px 0; color: var(--paper); border: 0; background: transparent; font: inherit; font-size: 8pt; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; } .gear-menu-toggle span { grid-row: 1/3; } .gear-menu-toggle i { display: block; width: 27px; height: 1px; background: currentColor; } .gear-nav { position: fixed; z-index: 32; inset: 0; min-height: 100svh; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 100px 32px 54px; background: rgba(17,19,15,.99); font-family: "Barlow Condensed", sans-serif; font-size: round(up, clamp(33pt,13vw,57pt), 1pt); letter-spacing: -.025em; transform: translateY(-105%); transition: transform 400ms cubic-bezier(.22,1,.36,1); } .gear-nav.is-open { transform: translateY(0); } .detail-hero { padding-top: 78px; } .detail-hero__copy { min-height: 700px; padding: 42px 22px; } .detail-hero__back { top: 91px; left: 14px; width: 38px; height: 38px; } .detail-hero h1 { font-size: round(up, clamp(60pt,24vw,90pt), 1pt); } .detail-hero h1.is-long { font-size: round(up, clamp(45pt,17vw,60pt), 1pt); } .detail-hero__subtitle { font-size: 14pt; } .detail-hero__image { min-height: 115vw; margin: 0 7px 7px; border-radius: 16px; } .inventory { padding: 90px 22px; } .gear-article h2, .gear-article h3 { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 65px; } .gear-category-total { padding-bottom: 0; } .gear-article li { padding-left: 48px; } .gear-article li.gear-item--weighted { grid-template-columns: 1fr; gap: 10px; } .gear-article li.gear-item--has-weight { padding-right: 0; } .gear-item__weight { width: fit-content; min-width: 0; } .gear-item__weight--inferred { position: static; display: block; margin-top: 10px; } .gear-grand-total { margin-top: 85px; } .next-list { min-height: 380px; padding: 50px 22px; } .next-list i { width: 54px; height: 54px; } .detail-footer p { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } .gear-title-reveal { opacity:1; filter:none; clip-path:none; transform:none; } }

/* Light field-journal palette */
:root { color-scheme: light; color: #29372b; background: #eee9df; --ink: #29372b; --forest: #d5ded2; --moss: #667861; --stone: #8b755e; --clay: #a86f50; --paper: #eee9df; --line: rgba(41,55,43,.17); }
body { background: var(--paper); }
.gear-header { color: var(--ink); background: rgba(238,233,223,.95); }
.gear-header.is-scrolled { background: rgba(218,226,215,.97); }
.gear-brand > span:last-child em { color: #78644f; }
.gear-nav a { color: rgba(41,55,43,.68); }
.gear-nav a:hover, .gear-nav a.is-active { color: var(--ink); }
.detail-hero { color: var(--ink); background: #dbe3d8; }
.detail-hero__copy { background: #dbe3d8; }
.detail-hero__back { color: #78644f; }
.detail-hero__eyebrow { color: #667861; }
.detail-hero__subtitle { color: rgba(41,55,43,.68); }
.detail-hero__stats { color: rgba(41,55,43,.52); }
.detail-hero__stats span:first-child { color: #78644f; }
.detail-hero__image::after { background: linear-gradient(180deg, transparent 72%, rgba(41,55,43,.12)); }
.detail-hero__image p { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.44); }
.next-list { color: #f7f3e9; }
.next-list span { color: #e0d0b9; }
.detail-footer { color: var(--ink); background: #e3e8df; }
.detail-footer p { color: rgba(41,55,43,.52); }
@media (max-width: 760px) { .gear-menu-toggle { color: var(--ink); } .gear-nav { color: var(--ink); background: rgba(238,233,223,.995); } }