:root { --white:#fff; --paper:#faf9f6; --ink:#151515; --muted:#6e6a65; --line:#d8d5cf; --soft:#f1efe9; --lilac:#dda0f2; --yellow:#f2f869; --accent:#d85a47; --serif:Georgia, 'Times New Roman', serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } img { display:block; max-width:100%; width:100%; height:auto; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .wrap { width:min(1260px, calc(100% - 48px)); margin:0 auto; } .kicker { margin:0 0 10px; color:#68635c; font-size:10px; font-weight:800; letter-spacing:.115em; text-transform:uppercase; } .deck { margin:12px 0 0; color:#625e58; font-size:14px; line-height:1.45; } .meta { margin:13px 0 0; color:#68635c; font-size:10px; letter-spacing:.075em; text-transform:uppercase; } .meta span { padding:0 4px; }
.at-site-header { position:relative; z-index:5; background:var(--white); border-bottom:1px solid var(--line); } .at-masthead { display:grid; grid-template-columns:52px 248px minmax(260px,510px) 1fr; align-items:center; gap:18px; width:min(1220px, calc(100% - 48px)); min-height:94px; margin:0 auto; } .menu-button { display:grid; gap:5px; width:35px; padding:7px 0; border:0; background:transparent; cursor:pointer; } .menu-button i { display:block; width:27px; height:2px; background:var(--ink); } .menu-button span { display:none; } .wordmark { display:flex; align-items:center; gap:9px; width:max-content; font-family:var(--sans); font-size:25px; font-weight:500; letter-spacing:-.055em; text-transform:lowercase; } .wordmark img { width:27px; height:27px; } .wordmark b { font-weight:800; } .at-search { display:flex; align-items:center; min-width:0; height:37px; border:1px solid var(--ink); border-radius:22px; overflow:hidden; } .at-search input { flex:1; min-width:0; height:100%; border:0; outline:0; padding:0 15px; font-size:14px; } .at-search button { border:0; height:100%; background:transparent; padding:0 15px; font-size:11px; font-weight:700; text-transform:uppercase; cursor:pointer; } .at-account-actions { display:flex; justify-content:flex-end; align-items:center; gap:13px; white-space:nowrap; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .at-account-actions a { padding-left:13px; border-left:1px solid var(--line); } .at-account-actions a:first-child { border:0; padding:12px 17px; border-radius:23px; background:var(--lilac); } .at-topic-row { display:flex; justify-content:center; gap:68px; padding:12px 24px 13px; border-top:1px solid #ededeb; background:var(--white); font-size:14px; } .at-topic-row a { position:relative; } .at-topic-row a:after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--ink); transition:right .2s ease; } .at-topic-row a:hover:after, .at-topic-row a:focus-visible:after { right:0; }
.at-lead { background:var(--white); } .at-lead-photo { position:relative; width:min(1660px, calc(100% - 96px)); margin:0 auto; overflow:hidden; background:#ddd8d0; } .at-lead-photo > a:first-child { display:block; } .at-lead-photo img { aspect-ratio:2.58/1; object-fit:cover; object-position:center 57%; } .lead-arrow { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--ink); border-radius:50%; background:var(--yellow); font-size:25px; line-height:1; transform:translate(-50%,-50%); transition:transform .2s ease; } .lead-arrow:hover { transform:translate(-50%,-50%) scale(1.08); } .at-chevron-caption { position:relative; width:min(1320px, calc(100% - 128px)); margin:0 auto; padding:44px 110px 56px; background:var(--white); text-align:center; } .at-chevron-caption:before { content:""; position:absolute; top:-34px; left:50%; width:148px; height:35px; background:var(--white); clip-path:polygon(0 100%,50% 0,100% 100%); transform:translateX(-50%); } .at-chevron-caption h1 { max-width:1050px; margin:0 auto; font:normal clamp(33px,3.1vw,55px)/1.03 var(--serif); letter-spacing:-.035em; } .at-chevron-caption h1 a:hover { text-decoration:underline; text-underline-offset:5px; } .at-chevron-caption > p:last-child { max-width:660px; margin:16px auto 0; color:#59554f; font-size:16px; }
.at-section-heading { display:grid; grid-template-columns:1fr auto; gap:22px; align-items:end; padding-bottom:24px; border-bottom:1px solid var(--ink); } .at-section-heading h2 { max-width:690px; margin:0; font:normal clamp(31px,3.4vw,49px)/.98 var(--serif); letter-spacing:-.04em; } .at-section-heading a { align-self:end; padding-bottom:4px; border-bottom:1px solid var(--ink); font-size:12px; font-weight:700; white-space:nowrap; }
.at-discovery { padding:73px 0 86px; } .at-discovery-grid { display:grid; grid-template-columns:1.4fr .9fr .9fr; grid-template-rows:auto auto; gap:24px; padding-top:28px; } .at-card { min-width:0; } .card-image { display:block; overflow:hidden; background:#ddd8d0; } .card-image img { aspect-ratio:4/3; object-fit:cover; transition:transform .35s ease; } .at-card:hover .card-image img { transform:scale(1.025); } .card-copy { padding-top:13px; } .card-copy h3 { margin:0; font:normal 29px/.99 var(--serif); letter-spacing:-.035em; } .card-copy h3 a:hover { text-decoration:underline; text-underline-offset:4px; } .discover-1 { grid-row:span 2; } .discover-1 .card-image img { aspect-ratio:3/4; } .discover-1 .card-copy h3 { font-size:43px; } .discover-2 { grid-column:2; } .discover-3 { grid-column:3; } .discover-4 { grid-column:2/4; display:grid; grid-template-columns:.8fr 1fr; gap:20px; align-items:start; } .discover-4 .card-copy { padding-top:0; }
.at-guide-band { padding:76px 0 88px; border-top:1px solid var(--line); background:#f1efe9; } .at-guide-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:20px; padding-top:30px; } .guide-major { grid-row:span 2; } .guide-major .card-image img { aspect-ratio:4/5; } .guide-major .card-copy h3 { font-size:43px; } .guide-small { padding-top:14px; border-top:1px solid var(--ink); } .guide-small .card-image img { aspect-ratio:16/9; } .guide-small .card-copy h3 { font-size:26px; }
.at-latest { padding:80px 0 92px; } .at-latest-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:30px; } .latest-card { padding-top:13px; border-top:1px solid var(--ink); } .latest-card .card-image img { aspect-ratio:4/5; } .latest-card .card-copy h3 { font-size:28px; }
.at-shopping { padding:80px 0; background:#f9e4db; border-top:1px solid #e6cfc5; border-bottom:1px solid #e6cfc5; } .at-shopping-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:56px; align-items:center; } .at-shopping h2 { margin:0; font:normal clamp(37px,4vw,61px)/.95 var(--serif); letter-spacing:-.05em; } .at-shopping h2 + p { max-width:410px; margin:19px 0 25px; font-size:17px; line-height:1.45; } .solid-link { display:inline-block; padding:13px 17px; background:var(--ink); color:var(--white); font-size:12px; font-weight:700; } .at-shopping-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .shopping-card .card-image img { aspect-ratio:3/4; } .shopping-card .card-copy h3 { font-size:25px; }
.at-seasonal { padding:80px 0 90px; } .at-seasonal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:19px; padding-top:30px; } .seasonal-card .card-image img { aspect-ratio:4/5; } .seasonal-card .card-copy h3 { font-size:27px; }
.at-newsletter { padding:85px 24px; background:var(--yellow); text-align:center; } .at-newsletter > div { max-width:720px; margin:0 auto; } .at-newsletter h2 { margin:0; font:normal clamp(38px,4.6vw,66px)/.94 var(--serif); letter-spacing:-.05em; } .at-newsletter h2 + p { max-width:460px; margin:17px auto 25px; } .at-newsletter form { display:grid; grid-template-columns:1fr auto; max-width:510px; margin:0 auto; border:1px solid var(--ink); background:var(--white); } .at-newsletter input { min-width:0; border:0; padding:15px 16px; background:transparent; outline:0; } .at-newsletter button { border:0; padding:0 19px; background:var(--ink); color:var(--white); font-size:12px; font-weight:700; cursor:pointer; } .form-message { min-height:18px; margin:10px 0 0; font-size:12px; }
.at-site-footer { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:35px; padding:55px max(32px,calc((100% - 1260px)/2)); background:var(--white); border-top:1px solid var(--ink); } .at-site-footer .wordmark { font-size:22px; } .at-site-footer p { max-width:260px; color:var(--muted); font-size:13px; line-height:1.5; } .at-site-footer > div:not(:first-child) { display:flex; flex-direction:column; align-items:flex-start; gap:9px; font-size:13px; } .at-site-footer b { margin-bottom:5px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; } .at-site-footer a:hover { text-decoration:underline; text-underline-offset:3px; }
.at-route-lead { position:relative; padding-bottom:50px; background:var(--white); } .at-route-lead-image { width:min(1660px,calc(100% - 96px)); margin:0 auto; } .at-route-lead-image img { aspect-ratio:2.5/1; object-fit:cover; } .at-route-title { width:min(980px,calc(100% - 64px)); margin:-20px auto 0; padding:43px 70px 0; position:relative; background:var(--white); text-align:center; } .at-route-title h1,.at-fixed-hero h1,.at-landing h1 { margin:0; font:normal clamp(42px,5vw,76px)/.95 var(--serif); letter-spacing:-.055em; } .at-route-title > p:last-child { max-width:650px; margin:17px auto 0; font-size:18px; color:var(--muted); } .at-category-content { padding:65px 0 90px; } .at-category-feature { display:grid; grid-template-columns:1.35fr .65fr; gap:30px; padding-bottom:45px; border-bottom:1px solid var(--ink); } .category-feature .card-image img { aspect-ratio:16/9; } .category-feature .card-copy h3 { font-size:46px; } .category-side { align-self:end; padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); } .category-side .card-image img { aspect-ratio:3/2; } .category-side .card-copy h3 { font-size:30px; } .at-category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding-top:42px; } .category-card { padding-top:14px; border-top:1px solid var(--ink); } .category-card .card-image img { aspect-ratio:3/2; } .category-card .card-copy h3 { font-size:31px; }
.at-article-header { width:min(960px,calc(100% - 64px)); margin:0 auto; padding:70px 0 40px; } .at-article-header h1 { max-width:920px; margin:0; font:normal clamp(47px,5.4vw,82px)/.94 var(--serif); letter-spacing:-.06em; } .article-deck { max-width:680px; margin:20px 0 0; font:20px/1.42 var(--serif); } .at-article-image { width:min(1660px,calc(100% - 48px)); margin:0 auto; } .at-article-image img { aspect-ratio:2.2/1; object-fit:cover; } .at-article-body { display:grid; grid-template-columns:190px minmax(0,670px); gap:82px; width:min(1000px,calc(100% - 64px)); margin:0 auto; padding:55px 0 78px; } .at-article-body aside { height:max-content; padding-top:15px; border-top:2px solid var(--ink); color:var(--muted); font-size:13px; } .at-article-body > div p { margin:0 0 24px; font:20px/1.62 var(--serif); } .at-article-body .article-disclosure { font:14px/1.5 var(--sans); } .article-disclosure a { text-decoration:underline; text-underline-offset:3px; } .at-related { padding:50px 0 80px; border-top:1px solid var(--line); } .at-related > div { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .related-card .card-image img { aspect-ratio:3/2; } .related-card .card-copy h3 { font-size:29px; }
.at-fixed-hero { padding:78px max(32px,calc((100% - 1260px)/2)); background:var(--soft); border-bottom:1px solid var(--line); } .at-fixed-hero > p:last-child { max-width:690px; margin:17px 0 0; font:20px/1.45 var(--serif); } .at-fixed-body { display:grid; grid-template-columns:230px minmax(0,700px); gap:90px; width:min(1040px,calc(100% - 64px)); margin:0 auto; padding:64px 0 90px; } .fixed-page-sidebar { height:max-content; padding-top:16px; border-top:2px solid var(--ink); color:var(--muted); font-size:14px; } .fixed-page-sidebar a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; } .fixed-page-visual-card section { padding:0 0 31px; margin:0 0 32px; border-bottom:1px solid var(--line); } .fixed-page-visual-card h2 { margin:0 0 14px; font:normal 36px/1 var(--serif); letter-spacing:-.04em; } .fixed-page-visual-card p { font-size:16px; line-height:1.56; }
.at-landing header { padding:82px max(32px,calc((100% - 1260px)/2)); background:#f1efe9; } .at-landing header > p:last-child { max-width:700px; margin:19px 0 0; font:20px/1.42 var(--serif); } .at-landing > div { display:grid; grid-template-columns:220px minmax(0,690px); gap:80px; width:min(1040px,calc(100% - 64px)); margin:0 auto; padding:70px 0 90px; } .at-landing aside { position:sticky; top:20px; display:flex; flex-direction:column; align-self:start; gap:10px; padding-top:15px; border-top:2px solid var(--ink); } .at-landing aside a { font-size:13px; text-decoration:underline; text-underline-offset:3px; } .at-landing h2 { margin:0 0 15px; font:normal 43px/1 var(--serif); letter-spacing:-.04em; } .at-landing section p { margin:0 0 25px; font:20px/1.62 var(--serif); }
@media (max-width:950px) { .at-masthead { grid-template-columns:40px 215px minmax(200px,1fr); } .at-account-actions { display:none; } .at-topic-row { gap:31px; } .at-discovery-grid { grid-template-columns:1.2fr 1fr; } .discover-3 { grid-column:1; } .discover-4 { grid-column:2; grid-row:span 2; display:block; } .discover-4 .card-copy { padding-top:13px; } .at-guide-grid { grid-template-columns:1fr 1fr; } .guide-major { grid-row:span 2; } .at-shopping-layout { grid-template-columns:1fr; gap:36px; } .at-category-feature { grid-template-columns:1fr; } .at-category-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .wrap { width:min(100% - 32px,1260px); } .at-masthead { grid-template-columns:36px 1fr 34px; gap:12px; min-height:72px; width:calc(100% - 32px); } .menu-button { width:28px; gap:4px; } .menu-button i { width:22px; height:1px; } .wordmark { font-size:22px; } .wordmark img { width:24px; height:24px; } .at-search { display:none; } .at-masthead:after { content:"Search"; justify-self:end; font-size:10px; font-weight:700; text-transform:uppercase; } .at-topic-row { display:none; position:absolute; top:72px; left:0; right:0; z-index:10; flex-direction:column; gap:0; padding:7px 16px 12px; border-bottom:1px solid var(--ink); box-shadow:0 10px 18px rgba(0,0,0,.08); } .at-topic-row.is-open { display:flex; } .at-topic-row a { padding:12px 0; border-bottom:1px solid var(--line); } .at-lead-photo { width:100%; } .at-lead-photo img { aspect-ratio:4/5; } .lead-arrow { width:47px; height:47px; font-size:21px; } .at-chevron-caption { width:calc(100% - 32px); padding:36px 12px 44px; } .at-chevron-caption:before { top:-24px; width:105px; height:25px; } .at-chevron-caption h1 { font-size:36px; } .at-chevron-caption > p:last-child { font-size:15px; } .at-section-heading { grid-template-columns:1fr; gap:15px; padding-bottom:18px; } .at-section-heading h2 { font-size:34px; } .at-discovery,.at-latest,.at-seasonal { padding:52px 0; } .at-discovery-grid,.at-guide-grid,.at-latest-grid,.at-shopping-cards,.at-seasonal-grid,.at-category-grid,.at-related > div { grid-template-columns:1fr; gap:24px; } .discover-1,.discover-2,.discover-3,.discover-4 { grid-column:auto; grid-row:auto; display:block; } .discover-1 .card-image img,.guide-major .card-image img { aspect-ratio:3/2; } .discover-1 .card-copy h3,.guide-major .card-copy h3 { font-size:36px; } .at-guide-band,.at-shopping { padding:56px 0; } .at-shopping-layout { gap:28px; } .at-shopping h2 { font-size:43px; } .at-newsletter { padding:60px 16px; } .at-newsletter form { grid-template-columns:1fr; } .at-newsletter button { padding:15px; } .at-site-footer { grid-template-columns:1fr 1fr; padding:44px 16px; gap:30px; } .at-site-footer > div:first-child { grid-column:1/-1; } .at-route-lead-image { width:100%; } .at-route-lead-image img { aspect-ratio:4/3; } .at-route-title { width:calc(100% - 32px); padding:32px 0 0; } .at-route-title h1,.at-fixed-hero h1,.at-landing h1 { font-size:48px; } .at-category-content { padding:48px 0 65px; } .category-feature .card-copy h3 { font-size:38px; } .at-article-header { width:calc(100% - 32px); padding:50px 0 30px; } .at-article-header h1 { font-size:49px; } .at-article-image { width:100%; } .at-article-image img { aspect-ratio:4/3; } .at-article-body,.at-fixed-body,.at-landing > div { grid-template-columns:1fr; gap:28px; width:calc(100% - 32px); padding:44px 0 65px; } .at-article-body > div p,.at-landing section p { font-size:18px; } .at-fixed-hero,.at-landing header { padding:54px 16px; } .at-fixed-body { width:calc(100% - 32px); } .at-landing aside { position:static; } }