/* The Analog Collection: shared styles.
   Layout: a print-magazine front page that reads as one column on a phone and opens into magazine grids on wider screens.
   Single light theme by choice, like a printed issue. */
:root{
  --paper:#F4EFE6;
  --card:#FBF8F2;
  --band:#EDE6DA;
  --ink:#1B1916;
  --ink-hover:#3A342D;
  --muted:#5E574E;
  --rule:#CFC6B8;
  --accent:#7A5C26;
  --gold:#D9BF8C;
  --on-ink-soft:#CFC6B8;
  --display:'Aboreto', Copperplate, Futura, 'Helvetica Neue', sans-serif;
  --sans:'Jost', Futura, 'Helvetica Neue', Arial, sans-serif;
  --fs-name:clamp(34px,9.4vw,132px);
  --fs-1:clamp(25px,2.7vw,38px);
  --fs-2:clamp(20px,2.1vw,30px);
  --fs-3:clamp(18px,1.7vw,24px);
  --fs-4:clamp(16px,1.4vw,20px);
  --fs-lead:clamp(17px,1.4vw,20px);
  --fs-body:clamp(16px,1.2vw,17px);
  --fs-product:16px;
  --fs-small:15px;
  --fs-caption:13px;
  --fs-eyebrow:12px;
  --fs-micro:11px;
  --track-eyebrow:.18em;
  --track-micro:.16em;
  --stroke:0.018em;
  --gutter:clamp(16px, 5vw, 80px);
  color-scheme:light;
}
html{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;font-synthesis:none;-webkit-text-stroke:var(--stroke) currentColor}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none !important}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:10;padding:10px 14px;background:var(--ink);color:var(--paper)}

.kicker{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--accent)}
.label{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--accent)}
.dek{font-family:var(--sans);font-size:var(--fs-lead);color:var(--muted);line-height:1.5}
.price{font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums}
.fine{font-size:var(--fs-caption);color:var(--muted);line-height:1.6}
.body-copy{font-size:var(--fs-body);line-height:1.65;max-width:62ch}
.h-xl{font-size:var(--fs-1);line-height:1.18}
.h-lg{font-size:var(--fs-2);line-height:1.2}
.h-md{font-size:var(--fs-3);line-height:1.22}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding-inline:28px;border:1px solid var(--ink);font:500 var(--fs-eyebrow)/1 var(--sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s,color .2s}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-hover);color:var(--paper)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:var(--card);color:var(--ink)}

/* Photographs: every picture sits in a fixed frame so pages don't jump while they load */
.art{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--card)}
.art img,.hero-art img,.find-art img{display:block;width:100%;height:100%;object-fit:cover}

.card{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink);text-decoration:none}
.card:hover{color:var(--ink)}
.card-name{font-family:var(--sans);font-size:var(--fs-product);font-weight:400;line-height:1.4}
.card:hover .card-name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.card .label{padding-top:4px}
.card-note{font-size:var(--fs-small);line-height:1.55;color:var(--muted)}

/* Preview note */
.mock-bar{background:var(--ink);color:var(--gold)}
.mock-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:8px}
.mock-text{font-size:12px;letter-spacing:.04em;line-height:1.45}

/* Top bar */
.topbar{border-bottom:1px solid var(--rule)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
.tb-tag{display:none}
.tb-sub{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
@media (min-width:760px){
  .topbar-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tb-tag{display:block}
  .tb-date{text-align:center}
  .tb-sub{justify-self:end}
}

/* Masthead */
.masthead{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block-start:clamp(28px,5vw,56px);text-align:center}
.brand{display:flex;flex-direction:column;align-items:center;gap:.14em;padding-left:.06em;font-size:var(--fs-name);line-height:1;letter-spacing:.06em;text-decoration:none;color:var(--ink);font-family:var(--display);font-synthesis:none;-webkit-text-stroke:var(--stroke) currentColor}
.brand:hover{color:var(--ink)}
.brand-the{font-size:clamp(13px,1.5vw,20px);letter-spacing:.45em;padding-left:.45em;line-height:1}
.brand-main{display:flex;flex-direction:column;align-items:center;gap:.1em;line-height:1}
.bm{display:block;line-height:1}
@media (min-width:760px){
  :root{--fs-name:clamp(44px,5.8vw,84px)}
  .brand-main{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:.32em;row-gap:.1em}
}
.brand-tag{font-size:clamp(15px,1.3vw,18px);letter-spacing:.02em}
.sections{align-self:stretch;margin-top:clamp(12px,2vw,24px)}
.dbl{border-block:1px solid var(--ink);padding-block:3px}
.dbl-in{display:flex;gap:clamp(22px,3vw,44px);overflow-x:auto;scrollbar-width:none;padding-inline:4px;border-block:1px solid var(--ink)}
.dbl-in::-webkit-scrollbar{display:none}
.dbl-in a{display:flex;align-items:center;flex:0 0 auto;min-height:50px;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--ink)}
.dbl-in a:hover,.dbl-in a[aria-current="page"]{color:var(--accent)}
@media (min-width:760px){
  .dbl-in{justify-content:center}
  .dbl-in a{min-height:56px}
}

/* Feature on the front page: the picture, a headline and a link */
.feature{padding-block-start:clamp(32px,5vw,64px)}
.feature-grid{display:grid;gap:clamp(20px,3vw,28px)}
.feature-grid > *{min-width:0}
.hero-art{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--card)}
a.hero-art{text-decoration:none}
.feature-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.read-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
@media (min-width:900px){
  .feature .hero-art{aspect-ratio:2/1}
  .feature-text{align-items:center;text-align:center}
}

/* Section heads */
.block-sm{padding-block-start:clamp(44px,5vw,64px)}
.block-lg{padding-block-start:clamp(64px,8vw,112px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding-bottom:14px;margin-bottom:clamp(20px,2.5vw,28px);border-bottom:1px solid var(--rule)}
.sec-label{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase;-webkit-text-stroke:0}
.sec-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sec-count{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}

.grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
@media (min-width:900px){.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}}

/* Today's find */
.find{padding-block-start:clamp(56px,7vw,96px)}
.find-card{display:grid;background:var(--card);border:1px solid var(--rule)}
.find-card > *{min-width:0}
.find-art{display:block;aspect-ratio:1/1;overflow:hidden}
.find-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:clamp(24px,4vw,64px) clamp(22px,5vw,72px)}
.find-meta{display:flex;align-items:center;gap:14px;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.meta-rule{width:40px;height:1px;background:var(--rule)}
.meta-date{color:var(--muted)}
.store-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.store-line .price{font-size:var(--fs-small)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:6px}
@media (max-width:559px){.actions{align-self:stretch}.actions .btn{flex:1 1 100%}}
@media (min-width:900px){
  .find-card{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .find-art{aspect-ratio:auto;min-height:600px}
  .find-body{padding-inline:clamp(32px,4vw,64px)}
}

/* The Drop */
.drop{padding-block-start:clamp(64px,8vw,112px)}
.dbl-rule{height:2px;border-block:1px solid var(--ink)}
.drop-head{display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,4vw,40px)}
.drop-head .dek{max-width:48ch}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline-end:calc(-1 * var(--gutter));padding-inline-end:var(--gutter);padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px;padding-inline:18px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:400 14px var(--sans);letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.chip:hover{background:var(--card)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.drop-tabs{margin-top:clamp(20px,3vw,28px)}
.drop-panel{display:grid;gap:24px;margin-top:clamp(24px,3vw,36px)}
.drop-panel > *{min-width:0}
.drop-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.drop-title{font-size:var(--fs-3);line-height:1.22}
.drop-picks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,62%);gap:14px;overflow-x:auto;scrollbar-width:none;margin-inline-end:calc(-1 * var(--gutter));padding-inline-end:var(--gutter)}
.drop-picks::-webkit-scrollbar{display:none}
@media (min-width:700px){.drop-picks{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;margin-inline-end:0;padding-inline-end:0}}
@media (min-width:900px){
  .drop-panel{gap:32px}
  .drop-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;grid-template-areas:"label note btn" "title note btn" "fine note btn";column-gap:clamp(32px,4vw,64px);row-gap:8px;align-items:start}
  .drop-info .label{grid-area:label}
  .drop-info .drop-title{grid-area:title}
  .drop-info .fine{grid-area:fine}
  .drop-info .body-copy{grid-area:note;align-self:center}
  .drop-info .btn{grid-area:btn;align-self:center}
  .drop-picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
}

/* High / Low */
.hl{padding-block-start:clamp(64px,8vw,112px)}
.hl-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.hl-head .dek{max-width:44ch}
.hl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px)}
.hl-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.hl-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-top:6px}
.hl-tag{font-family:var(--sans);font-size:clamp(16px,1.3vw,18px)}
.hl-card .card-name{font-size:clamp(17px,1.4vw,19px)}
.hl-card .btn{margin-top:6px;padding-inline:10px;font-size:var(--fs-micro);letter-spacing:.12em;min-height:46px}
.or{display:none}
@media (min-width:760px){
  .hl-grid{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:0}
  .hl-card .btn{align-self:flex-start;padding-inline:26px;font-size:var(--fs-eyebrow);letter-spacing:var(--track-eyebrow)}
  .or{display:flex;flex-direction:column;align-items:center;gap:16px}
  .or-line{flex:1;width:1px;background:var(--rule)}
  .or-circle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;font:500 var(--fs-micro) var(--sans);letter-spacing:var(--track-micro);text-transform:uppercase;padding-left:var(--track-micro)}
}

/* Shop all */
.archive{margin-top:clamp(64px,8vw,112px);background:var(--band);padding-block:clamp(48px,7vw,96px)}
.arch-head{display:grid;gap:24px}
.arch-head > *{min-width:0}
.arch-intro{display:flex;flex-direction:column;gap:16px}
.search{display:flex;flex-direction:column;gap:8px}
.search label{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase}
#archive-search{width:100%;min-height:52px;padding-inline:16px;border:1px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink);font:16px var(--sans);-webkit-appearance:none;appearance:none}
#archive-search::placeholder{color:#6E665C}
@media (min-width:900px){.arch-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:64px}}
.filters{display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,4vw,40px);padding-block:24px;border-block:1px solid var(--rule)}
.frow{display:grid;gap:8px;min-width:0}
.frow-label{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
@media (min-width:760px){
  .frow{grid-template-columns:80px minmax(0,1fr);align-items:center;gap:24px}
  .filters .chips{flex-wrap:wrap;overflow:visible;margin-inline-end:0;padding-inline-end:0}
}
.results{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block:22px}
.count{font-size:var(--fs-small);color:var(--muted)}
.text-btn{min-height:44px;padding-inline:2px;border:0;background:transparent;color:var(--ink);font:500 var(--fs-micro) var(--sans);letter-spacing:var(--track-micro);text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;cursor:pointer}
.text-btn:hover{color:var(--accent)}
.arch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
@media (min-width:700px){.arch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}}
@media (min-width:1100px){.arch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 32px}}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(40px,6vw,72px) 20px;border:1px solid var(--rule);text-align:center}
.empty-title{font-family:var(--display);font-size:var(--fs-3);line-height:1.22;font-synthesis:none;-webkit-text-stroke:var(--stroke) currentColor}

/* From the editor */
.editor{padding-block:clamp(64px,8vw,112px)}
.editor-card{display:grid;justify-items:center;gap:28px;max-width:880px;margin-inline:auto;text-align:center}
.editor-card > *{min-width:0}
.editor-photo{display:block;width:180px;max-width:100%;height:auto;aspect-ratio:18/23;object-fit:cover;border-radius:90px 90px 0 0;background:#C8CCB6}
.editor-text{display:flex;flex-direction:column;align-items:center;gap:16px}
.editor-text .body-copy{max-width:52ch}
@media (min-width:700px){
  .editor-card{grid-template-columns:200px minmax(0,1fr);justify-items:start;align-items:center;gap:56px;text-align:left}
  .editor-photo{width:200px;border-radius:100px 100px 0 0}
  .editor-text{align-items:flex-start}
}

/* Newsletter */
.news{background:var(--ink);color:var(--paper);padding-block:clamp(56px,7vw,104px)}
.news :focus-visible{outline-color:var(--gold)}
.news-grid{display:grid;gap:32px}
.news-grid > *{min-width:0}
.news-text{display:flex;flex-direction:column;gap:16px}
.kicker-gold{color:var(--gold)}
.news-copy{font-size:var(--fs-body);line-height:1.65;color:var(--on-ink-soft);max-width:52ch}
.news-form{display:flex;flex-direction:column;gap:10px}
.news-form label{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase}
.field-row{display:flex;flex-wrap:wrap;gap:10px}
#news-email{flex:1 1 220px;min-width:0;min-height:56px;padding-inline:16px;border:1px solid var(--paper);border-radius:0;background:transparent;color:var(--paper);font:16px var(--sans);-webkit-appearance:none;appearance:none}
#news-email::placeholder{color:#A39A8E}
.field-row .btn{flex:1 0 auto;min-height:56px}
.news-msg{font-size:var(--fs-small);color:var(--gold)}
.news .fine{color:var(--on-ink-soft)}
.news .fine a{color:var(--paper)}
@media (min-width:900px){.news-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:80px}}

/* Footer */
.footer{display:flex;flex-direction:column;gap:22px;padding-block:clamp(44px,6vw,72px) clamp(40px,5vw,64px)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.foot-brand{font-family:var(--display);font-size:clamp(18px,1.8vw,24px);font-weight:400;letter-spacing:.06em;font-synthesis:none;-webkit-text-stroke:var(--stroke) currentColor}
.foot-nav{display:flex;flex-wrap:wrap;column-gap:clamp(20px,2.5vw,36px)}
.foot-nav a{display:flex;align-items:center;min-height:44px;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;text-decoration:none}
.foot-note{max-width:78ch}

/* Feature page */
.story{padding-block:clamp(28px,4vw,48px) 0}
.story-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;max-width:680px;margin-inline:auto;padding-top:clamp(28px,4vw,48px)}
.byline{font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--muted)}
.story-body{display:flex;flex-direction:column;gap:18px;width:100%;max-width:680px;margin-inline:auto;padding-top:22px}
.story .hero-art{aspect-ratio:4/3}
.photo-credit{margin-top:8px}
@media (min-width:900px){.story .hero-art{aspect-ratio:2/1}}
.disclose{padding:12px 0 0;border-top:1px solid var(--rule)}

/* Plain pages (disclosure) */
.page{max-width:680px;margin-inline:auto;padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:18px}
.page h2{font-size:var(--fs-3);line-height:1.22;margin-top:14px}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}