:root {
  --cup-paper: #FFFFFF;
  --cup-ink: #1F1B17;
  --cup-saddle: #8A5A34;
  --cup-sand: #F4EFE7;
  --cup-rule: #D9D0C5;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--cup-paper); color: var(--cup-ink); font: 400 17px/1.75 'Mulish', sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--cup-saddle); text-underline-offset: .24em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cup-saddle); outline-offset: 6px; }
h1, h2, h3 { font-family: 'EB Garamond', serif; font-weight: 500; line-height: 1.14; letter-spacing: 0; }
h1 { font-size: 38px; margin: 0 0 24px; }
h2 { font-size: 34px; margin: 0 0 24px; }
h3 { font-size: 27px; margin: 0 0 16px; }
.cup-compound { white-space: nowrap; }
p { margin: 0 0 22px; }
p:last-child { margin-bottom: 0; }
.cup-skip { position: absolute; top: -100px; left: 20px; z-index: 20; background: var(--cup-paper); padding: 10px 18px; }
.cup-skip:focus { top: 12px; }
.cup-mast { position: relative; background: var(--cup-paper); }
.cup-nameplate { padding: 20px 24px 14px; text-align: center; }
.cup-brand { font: 500 31px/1.1 'EB Garamond', serif; color: var(--cup-ink); text-decoration: none; }
.cup-header-line { font-size: 15px; line-height: 1.5; margin: 7px 0 0; }
.cup-navrow { display: flex; justify-content: center; align-items: center; gap: 35px; padding: 12px 24px 20px; }
.cup-navrow a { font-size: 15px; color: var(--cup-ink); text-decoration: none; }
.cup-navrow a:hover, .cup-navrow a[aria-current] { text-decoration: underline; text-underline-offset: .35em; }
.cup-navrow a[aria-current] { font-weight: 600; }
.cup-mobile-nav { display: none; }
.cup-home-title { text-align: center; padding: 22px 24px 26px; }
.cup-home-title h1 { font-size: 34px; margin: 0 0 9px; }
.cup-home-title p { font-size: 15px; }
.cup-main-photo { position: relative; }
.cup-main-photo > img { width: 100%; height: clamp(540px, calc(100svh - 250px), 800px); object-fit: cover; object-position: 50% 55%; }
.cup-framed { display: inline-block; background: var(--cup-paper); color: var(--cup-saddle); border: 1px solid var(--cup-saddle); border-bottom-width: 3px; padding: 12px 30px; font: 500 20px/1.3 'EB Garamond', serif; text-decoration: none; }
.cup-framed::before { content: '·'; margin-right: 15px; }
.cup-framed::after { content: '·'; margin-left: 15px; }
.cup-framed:hover { background: var(--cup-sand); }
.cup-photo-action { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.cup-centered { text-align: center; max-width: 560px; margin: 0 auto; }
.cup-centered p { text-align: left; }
.cup-short-band p { text-align: center; }
.cup-wide-band { padding: 100px 24px; }
.cup-wide-band p { font-size: 16px; line-height: 1.8; }
.cup-wide-band .cup-centered > a { display: inline-block; margin-top: 12px; font-size: 15px; }
.cup-sand-band { background: var(--cup-sand); padding: 83px 24px; }
.cup-topic-links { display: flex; justify-content: center; gap: 30px; margin-top: 28px; font-size: 15px; }
.cup-panorama { width: 100%; height: min(56vw, 800px); min-height: 480px; object-fit: cover; object-position: 50% 45%; }
.cup-photo-story { margin: 0; }
.cup-split-story { display: grid; grid-template-columns: 1fr 1fr; min-height: 690px; }
.cup-split-story > img { width: 100%; height: 100%; min-height: 690px; object-fit: cover; object-position: 50% 50%; }
.cup-split-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 60px; text-align: center; }
.cup-split-copy > div { max-width: 450px; }
.cup-split-copy p { font-size: 16px; text-align: left; }
.cup-split-copy .cup-framed { margin-top: 29px; }
.cup-split-story.cup-reversed { background: var(--cup-sand); }
.cup-reversed > img { grid-column: 2; grid-row: 1; }
.cup-reversed .cup-split-copy { grid-column: 1; grid-row: 1; }
.cup-reading-section { padding: 100px 0; }
.cup-reading-section > .cup-centered { max-width: 608px; padding: 0 24px; }
.cup-reading-section p { font-size: 16px; line-height: 1.8; }
.cup-reading-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1328px; margin: 44px auto 0; padding: 0 24px; }
.cup-reading-grid.cup-three-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1008px; }
.cup-reading-tile { min-width: 0; font: 500 20px/1.3 'EB Garamond', serif; text-align: center; text-decoration: none; }
.cup-tile-image { display: block; aspect-ratio: 1; }
.cup-tile-image > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cup-tile-label { display: block; margin-top: 16px; text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }
.cup-reading-tile:hover .cup-tile-label { text-decoration-thickness: 2px; }
.cup-inner-opening { display: grid; grid-template-columns: 1fr 1fr; }
.cup-inner-opening > img { width: 100%; height: 560px; object-fit: cover; object-position: 50% 50%; }
.cup-inner-summary { display: flex; justify-content: center; align-items: center; padding: 48px 55px; text-align: center; }
.cup-inner-summary > div { max-width: 530px; }
.cup-inner-summary h1 { font-size: 36px; }
.cup-inner-summary p { font-size: 16px; line-height: 1.65; margin-bottom: 18px; }
.cup-text-opening { padding: 75px 24px 67px; max-width: 760px; margin: 0 auto; text-align: center; }
.cup-text-opening p { font-size: 17px; }
.cup-article { width: min(100% - 48px, 690px); margin: 0 auto; padding: 80px 0 110px; }
.cup-article-section + .cup-article-section { margin-top: 65px; }
.cup-article-section h2 { text-align: center; }
.cup-related { background: var(--cup-sand); padding: 80px 0; text-align: center; }
.cup-related > h2 { padding: 0 24px; }
.cup-question { padding: 25px 0; border-bottom: 1px solid var(--cup-rule); }
.cup-question summary { cursor: pointer; list-style: none; padding-right: 30px; position: relative; }
.cup-question summary::-webkit-details-marker { display: none; }
.cup-question summary::after { content: '+'; position: absolute; right: 1px; top: 0; font: 400 25px/1.3 'Mulish', sans-serif; }
.cup-question[open] summary::after { content: '−'; }
.cup-question summary h3 { font-size: 27px; margin: 0; }
.cup-question p { margin: 21px 0 0; }
.cup-faq-set { margin-top: 65px; }
.cup-faq-set > h2 { text-align: center; }
.cup-question:first-of-type { border-top: 1px solid var(--cup-rule); }
.cup-footer-help { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--cup-rule); }
.cup-footer-help > div { text-align: center; padding: 60px 35px; }
.cup-footer-help > div:last-child { background: var(--cup-sand); }
.cup-footer-help h2 { font-size: 29px; }
.cup-footer-help p { max-width: 440px; margin: 0 auto 16px; font-size: 15px; }
.cup-footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1130px; margin: 0 auto; padding: 60px 24px; }
.cup-footer-columns h3 { font-size: 23px; margin-bottom: 18px; }
.cup-footer-columns a { display: block; font-size: 15px; color: var(--cup-ink); margin: 8px 0; }
.cup-footer-columns p { font-size: 15px; }
.cup-closing { background: var(--cup-ink); color: var(--cup-paper); text-align: center; padding: 21px 24px; font-size: 15px; }
.cup-not-found { max-width: 620px; padding: 95px 24px 120px; margin: 0 auto; text-align: center; }
@media (max-width: 1000px) {
  .cup-navrow { gap: 25px; }
  .cup-split-copy { padding: 65px 38px; }
  .cup-split-story, .cup-split-story > img { min-height: 620px; }
  .cup-inner-summary { padding: 40px 30px; }
  .cup-inner-summary p { text-align: left; }
  .cup-inner-opening > img { height: 650px; }
}
@media (max-width: 700px) {
  h1 { font-size: 33px; }
  h2 { font-size: 30px; }
  .cup-nameplate { padding: 20px 62px 18px; }
  .cup-brand { font-size: 30px; }
  .cup-header-line { max-width: 340px; margin: 7px auto 0; font-size: 15px; }
  .cup-desktop-nav { display: none; }
  .cup-mobile-nav { display: block; text-align: center; font-size: 15px; }
  .cup-mobile-nav > summary { position: absolute; top: 17px; left: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 46px; min-height: 48px; cursor: pointer; list-style: none; font-size: 15px; line-height: 1.2; }
  .cup-mobile-nav > summary::marker { content: ''; }
  .cup-mobile-nav > summary::-webkit-details-marker { display: none; }
  .cup-mobile-nav > summary svg { display: block; }
  .cup-mobile-nav .cup-navrow { flex-wrap: wrap; gap: 15px 26px; padding: 18px 24px 25px; }
  .cup-home-title { padding: 21px 24px 24px; }
  .cup-home-title h1 { font-size: 29px; max-width: 340px; margin: 0 auto 10px; }
  .cup-home-title p { font-size: 15px; }
  .cup-main-photo > img { height: max(470px, calc(100svh - 280px)); object-position: 52% 55%; }
  .cup-photo-action { bottom: 32px; }
  .cup-framed { font-size: 19px; padding: 12px 20px; }
  .cup-wide-band { padding: 65px 24px; }
  .cup-sand-band { padding: 65px 24px; }
  .cup-short-band p { text-align: left; }
  .cup-topic-links { gap: 20px; flex-wrap: wrap; }
  .cup-panorama { min-height: 460px; height: 115vw; object-position: 50% 45%; }
  .cup-split-story { display: flex; flex-direction: column; min-height: 0; }
  .cup-split-story > img { height: 115vw; min-height: 0; max-height: 650px; }
  .cup-split-copy { padding: 65px 28px; }
  .cup-reading-section { padding: 65px 0; }
  .cup-reading-grid, .cup-reading-grid.cup-three-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; margin-top: 35px; }
  .cup-three-tiles > .cup-reading-tile:last-child { grid-column: 1 / -1; width: calc((100% - 18px) / 2); justify-self: center; }
  .cup-reading-tile { font-size: 20px; }
  .cup-related { padding: 65px 0; }
  .cup-inner-opening { display: flex; flex-direction: column; }
  .cup-inner-opening > img { height: 95vw; max-height: 540px; }
  .cup-inner-summary { padding: 50px 24px 55px; }
  .cup-inner-summary h1 { font-size: 33px; }
  .cup-text-opening { padding: 55px 24px 25px; }
  .cup-text-opening p { text-align: left; }
  .cup-article { padding-top: 55px; padding-bottom: 75px; }
  .cup-article-section + .cup-article-section, .cup-faq-set { margin-top: 48px; }
  .cup-question summary h3 { font-size: 25px; line-height: 1.2; }
  .cup-footer-help { grid-template-columns: 1fr; }
  .cup-footer-help > div { padding: 45px 24px; }
  .cup-footer-columns { grid-template-columns: 1fr 1fr; padding: 45px 24px; gap: 30px 20px; }
  .cup-footer-columns > div:last-child { grid-column: 1 / -1; }
}