/*
Theme Name: Old Money Diary
Theme URI: https://oldmoneydiary.com
Author: Old Money Diary
Description: 은퇴 카운트다운과 영수증을 중심에 둔 개인 기록 사이트용 독립 테마. 3열 격자 첫 화면, 영수증이 붙는 글 상세 페이지.
Version: 1.9.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: old-money-diary
Tags: blog, one-column, three-columns, custom-menu, custom-logo, editor-style
*/

:root{
  color-scheme: only light;

  --paper:   #F8F6F0;
  --ink:     #1C1A17;
  --green:   #22382C;
  --orange:  #E6742C;
  --ledger:  #17212E;

  --block-1: #E6E1D5;
  --block-2: #D7D1C2;

  --serif:  "Noto Serif KR", Georgia, serif;
  --sans:   "Noto Sans KR", system-ui, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display:"Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --script: "Caveat", "Noto Serif KR", cursive;

  --line: 1.5px;
  --gap: 14px;
  --pad: 36px;
  --frame-max: 1100px;

  --col-body: 680px;
  --col-side: 340px;
  --col-space: 36px;
  --bleed: 70px;
}

*{ box-sizing: border-box; }
html{ background: var(--paper); }

body{
  margin: 0;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; }

.num{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.frame{
  max-width: var(--frame-max);
  margin: 0 auto;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

.divider{
  height: 0;
  margin: 0 var(--pad);
  border: 0;
  border-top: var(--line) solid var(--ink);
}

/* ══════ 머리글 ══════ */

.topbar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px var(--pad) 16px;
}
.topbar.is-small{ padding: 16px var(--pad) 13px; }

.logo-link{ flex: 0 1 460px; min-width: 0; }
.logo-link img{ display: block; width: 100%; max-width: 460px; height: auto; }
.is-small .logo-link{ flex: 0 1 300px; }
.is-small .logo-link img{ max-width: 300px; }

.social{ display: flex; align-items: center; gap: 15px; flex: 0 0 auto; padding-bottom: 5px; }
.social a{ display: block; color: var(--ink); opacity: .72; line-height: 0; }
.social svg{ width: 17px; height: 17px; display: block; }
.is-small .social svg{ width: 16px; height: 16px; }
.social a:hover{ color: var(--green); opacity: 1; }

/* ══════ 소개 + D-day ══════ */

.intro{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 30px;
  align-items: center;
  padding: 30px var(--pad) 72px;
}

.about-label{
  font-family: var(--script);
  font-size: 26px;
  line-height: 1;
  color: var(--green);
  margin: 0 0 6px;
}

.headline{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.22;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}

.standfirst{ font-size: 14px; line-height: 1.8; margin: 0; }

.dday{
  position: relative;
  background: var(--orange);
  color: var(--ink);
  border-radius: 10px;
  min-height: 168px;
  padding: 22px 200px 20px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dday-label{ font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.2; }
.dday-count{
  display: block;
  color: var(--paper);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.05;
  margin: 2px 0 14px;
}
.dday-rule{
  width: 62%;
  min-width: 150px;
  border-top: var(--line) solid rgba(28,26,23,.5);
  margin-bottom: 9px;
}
.dday-foot{ display: flex; gap: 9px; align-items: baseline; font-size: 13px; }
.dday-art{ position: absolute; right: 18px; top: 14px; width: 168px; height: auto; pointer-events: none; }

/* ══════ 메뉴 ══════ */

.menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 22px;
  padding: 13px var(--pad);
  font-size: 16px;
}
.menu a:hover{ color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
.menu .dot{ color: var(--ink); opacity: .5; font-size: 13px; }

/* ══════ 카테고리 머리 ══════ */

.arch-head{ padding: 26px var(--pad) 18px; }
.arch-head h1{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.04em;
  margin: 0;
}
.arch-head .count{ font-size: 12.5px; color: rgba(28,26,23,.55); margin: 8px 0 0; }

/* ══════ 격자 ══════ */

.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  padding: 16px var(--pad) var(--pad);
  align-items: stretch;
}

.slot-wide{ grid-column: span 2; }
.slot-tall{ grid-row: span 2; }
.slot-stack{
  grid-row: span 2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
  min-width: 0;
}

.post{
  position: relative;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.post-link{ position: absolute; inset: 0; z-index: 1; }

.meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: var(--line) solid var(--ink);
  font-size: 11.5px;
  min-height: 30px;
}
.meta .label{ color: var(--green); }
.meta .date{ margin-left: auto; }

.visual{
  position: relative;
  background: var(--block-1);
  border-bottom: var(--line) solid var(--ink);
  flex: 1 1 auto;
  min-height: 120px;
  overflow: hidden;
}
.visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.visual.tone-2{ background: var(--block-2); }
.visual.tone-green{ background: var(--green); }
.visual.tone-dark{ background: var(--ledger); }

.ratio-169{ aspect-ratio: 16 / 9; max-height: 260px; flex: 0 0 auto; }
.form-video .visual{ aspect-ratio: 9 / 16; flex: 1 1 auto; }

.post-body{ padding: 12px 12px 14px; }

.title{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
}
.size-wide .title{ font-size: 26px; }

.form-text{ justify-content: center; padding: 35px 33px; }
.form-text .sentence{
  font-size: 20px; line-height: 1.45; letter-spacing: -0.02em; margin: 0;
  /* 한글은 글자 사이 아무 데서나 끊어도 되는 것이 브라우저 기본값이다.
     그래서 "썼어 / 요." 처럼 낱말 한가운데가 갈라진다. keep-all 은 띄어쓰기에서만
     끊게 한다. 여백을 33px 로 넓혀 글 폭이 265px 로 좁아진 뒤부터 눈에 띄었다.
     break-word 는 보험이다. 띄어쓰기 없이 한 덩어리로 긴 글(주소 같은 것)이
     들어와 한 줄에 못 담을 때만 그때 끊어서 카드 밖으로 넘치지 않게 한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 스레드에서 온 글 카드.
   글 덩어리가 테두리 안에서 뭉쳐 보이려면, 좌우 여백이 줄 사이 빈 틈보다 넉넉해야 한다.
   그래서 여백을 키우고 행간을 조였다. 둘이 상쇄돼 카드 높이는 오히려 낮아진다.
   여백은 짧은 글 카드 전체에 같은 값으로 준다. 한 줄에 여러 장이 늘어섰을 때
   글 시작 위치가 어긋나 보이지 않게 하려는 것이다.

   여백 33px 과 행간 1.42 는 운영자가 실제 사이트에서 직접 맞춘 값이다.
   눈으로 보고 고른 숫자이니 임의로 바꾸지 않는다. */

.form-text .sentence.s1,
.form-text .sentence.s2,
.form-text .sentence.s3,
.form-text .sentence.s4,
.form-text .sentence.s5{
  letter-spacing: -0.015em;
}
.form-text .sentence.s1{ font-size: 24px;   line-height: 1.42; }
.form-text .sentence.s2{ font-size: 20px;   line-height: 1.42; }
.form-text .sentence.s3{ font-size: 16px;   line-height: 1.42; }
.form-text .sentence.s4{ font-size: 14px;   line-height: 1.42; letter-spacing: -0.01em; }
.form-text .sentence.s5{ font-size: 12.5px; line-height: 1.42; letter-spacing: -0.005em; }

/* 문단 하나. 안쪽 줄바꿈은 쓴 대로 지키고, 문단 사이는 반 줄만 띄운다 */
.form-text .sentence .pz{ display: block; white-space: pre-wrap; }
.form-text .sentence .pz + .pz{ margin-top: 0.55em; }

.form-text .sentence .more{
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--green);
}
.form-text.tone-solid .sentence .more{ color: rgba(248,246,240,.8); }

/* 스레드 계정 표시 */
.form-text .label-th{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
}
.form-text .label-th svg{ width: 13px; height: 13px; display: block; flex: 0 0 auto; }
.form-text .label-th .handle{
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-text.tone-solid .label-th{ color: rgba(248,246,240,.78); }

/* 자리가 모자라면 계정 이름이 줄어들되, 날짜는 안 밀린다 */
.form-text .foot{ align-items: center; }
.form-text .foot .label-th{ min-width: 0; flex: 0 1 auto; }
.form-text .foot .num{ flex: 0 0 auto; }
.form-text .foot{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 11.5px;
}
.form-text .foot .label{ color: var(--green); }
.form-text.tone-solid{ background: var(--green); color: var(--paper); }
.form-text.tone-solid .foot,
.form-text.tone-solid .foot .label{ color: rgba(248,246,240,.72); }

.tag-video{
  position: absolute;
  z-index: 2;
  top: 10px; left: 10px;
  border: var(--line) solid rgba(248,246,240,.7);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 6px;
}

/* 빈자리 채움 블록 */
.filler{ border: var(--line) solid var(--ink); background: var(--block-1); min-height: 120px; }
.filler.tone-solid{ background: var(--green); border-color: var(--ink); }
.filler.tone-2{ background: var(--block-2); }

/* ══════ 카드 뒤집기 ══════ */

.has-receipt{ border: none; background: none; perspective: 1600px; }
.flip-inner{
  display: grid;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  flex: 1 1 auto;
}
.has-receipt.is-flipped .flip-inner{ transform: rotateY(180deg); }

.face{
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.face-back{ transform: rotateY(180deg); background: var(--ledger); color: var(--paper); }

.flip-btn{
  position: absolute;
  z-index: 2;
  right: 10px; bottom: 10px;
  border: var(--line) solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 9px;
  cursor: pointer;
}
.face-back .flip-btn{ border-color: rgba(248,246,240,.7); background: var(--ledger); color: var(--paper); }

/* ══════ 영수증 (공통) ══════ */

.receipt{ padding: 14px 14px 46px; }
.receipt-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
}
.receipt-head h3{ font-family: var(--serif); font-weight: 600; font-size: 15px; margin: 0; }
.receipt-head .when{ font-family: var(--mono); font-size: 11px; color: rgba(248,246,240,.6); }

.group + .group{ margin-top: 18px; }
.grow{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 7px;
  border-bottom: var(--line) solid rgba(248,246,240,.85);
}
.grow .what{ font-family: var(--sans); font-weight: 700; font-size: 13.5px; }
.grow .amt{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; white-space: nowrap; }

.rows{ list-style: none; margin: 0; padding: 7px 0 0; }
.row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}
.row .what{ font-size: 13px; color: rgba(248,246,240,.85); overflow-wrap: anywhere; }
.row .amt{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.amt.minus{ color: var(--orange); }
.row.more-line .what{ color: rgba(248,246,240,.55); font-size: 12px; }

.total{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding-top: 11px;
  border-top: 2.5px solid rgba(248,246,240,.95);
}
.total .what{ font-family: var(--sans); font-weight: 700; font-size: 14px; }
.total .amt{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 21px; }

/* 카드 뒷면용 축소판 */
.receipt.compact{ padding: 13px 13px 44px; }
.receipt.compact .total{ margin-top: 14px; }
.receipt.compact .total .amt{ font-size: 18px; }

/* ══════ 글 상세 ══════ */

.rail{
  display: grid;
  grid-template-columns: minmax(0, var(--col-body)) var(--col-side);
  column-gap: var(--col-space);
  justify-content: center;
  padding: 0 var(--pad);
}

.article-head{ grid-column: 1; padding: 44px 0 30px; }
.article-body{ grid-column: 1; padding-bottom: 60px; }
.article-side{ grid-column: 2; min-width: 0; }

.post-page.no-receipt .rail{ grid-template-columns: minmax(0, var(--col-body)); }
.post-page.no-receipt .article-side{ display: none; }

.hero{ margin: 0 0 38px; padding: 0 var(--pad); }
.hero .visual{ background: var(--block-2); aspect-ratio: 21 / 9; border: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); }
.hero figcaption{ margin-top: 10px; }

.kicker{ font-size: 12.5px; color: var(--green); letter-spacing: .02em; margin: 0 0 14px; }

.article-title{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 42px;
  line-height: 1.18;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}

.byline{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  border-top: var(--line) solid var(--ink);
  padding-top: 10px;
}
.byline .who{ font-family: var(--serif); font-weight: 600; font-size: 13px; }

.article-body p{ font-size: 17.5px; line-height: 1.9; margin: 0 0 26px; }
.article-body > p:first-child{ font-size: 19px; }

.article-body h2, .article-body h3{
  font-family: var(--sans);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.04em;
  margin: 48px 0 20px;
  padding-top: 18px;
  border-top: var(--line) solid var(--ink);
}
.article-body h2{ font-size: 25px; }
.article-body h3{ font-size: 20px; }

.article-body blockquote{
  margin: 34px 0;
  padding: 4px 0 4px 24px;
  border-left: var(--line) solid var(--green);
  font-size: 21px;
  line-height: 1.68;
  color: var(--green);
  letter-spacing: -0.02em;
}
.article-body blockquote p{ font-size: inherit; line-height: inherit; margin: 0 0 10px; }
.article-body blockquote p:last-child{ margin-bottom: 0; }
.article-body blockquote cite{ display: block; font-size: 13px; font-style: normal; opacity: .7; }

.article-body ol, .article-body ul{
  margin: 30px 0;
  padding: 0;
  list-style: none;
  border-top: var(--line) solid var(--ink);
}
.article-body ol{ counter-reset: omdn; }
.article-body ol > li, .article-body ul > li{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-bottom: var(--line) solid var(--ink);
  font-size: 16.5px;
  line-height: 1.7;
}
.article-body ol > li{ counter-increment: omdn; }
.article-body ol > li::before{
  content: counter(omdn, decimal-leading-zero);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--green);
  padding-top: 5px;
}
.article-body ul > li::before{
  content: "";
  width: 9px; height: 9px;
  margin-top: 12px;
  margin-left: 12px;
  background: var(--green);
}

.article-body figure, .article-body .wp-block-image{ margin: 34px 0; }
.article-body figure img, .article-body .wp-block-image img{ display: block; width: 100%; height: auto; border: var(--line) solid var(--ink); }
.article-body figcaption, .wp-element-caption{
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(28,26,23,.58);
}
.article-body .alignwide, .article-body .wp-block-image.alignwide, .article-body figure.wide{
  width: calc(100% + var(--bleed));
  margin-left: calc(-1 * var(--bleed));
}
.article-body .aligncenter{ margin-left: auto; margin-right: auto; }
.article-body a{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong{ font-weight: 600; }
.article-body hr{ border: 0; border-top: var(--line) solid var(--ink); margin: 40px 0; }
.article-body .visual{ border: var(--line) solid var(--ink); }

.receipt-panel{
  position: sticky;
  top: 20px;
  margin-bottom: 60px;
  background: var(--ledger);
  color: var(--paper);
  padding: 18px 18px 20px;
}
.receipt-panel .receipt{ padding: 0; }
.receipt-panel.is-tall{ position: static; }

/* ══════ 글 아래 ══════ */

.below{ padding: 0 var(--pad); }
.sec-label{ font-size: 12px; color: rgba(28,26,23,.55); padding: 22px 0 12px; }

.prevnext{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-bottom: 8px; }
.pn{
  position: relative;
  border: var(--line) solid var(--ink);
  padding: 16px 18px 18px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pn .dir{ font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--green); }
.pn .t{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.035em;
  margin-top: 12px;
}
.pn.next{ text-align: right; }
.pn:hover{ background: var(--block-1); }
.pn.is-empty{ opacity: .4; }

.more{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.mini{ position: relative; border: var(--line) solid var(--ink); display: flex; flex-direction: column; }
.mini .meta{ padding: 6px 11px; font-size: 11px; min-height: 27px; }
.mini .visual{ aspect-ratio: 16 / 9; min-height: 0; flex: 0 0 auto; }
.mini .t{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.28;
  letter-spacing: -0.035em;
  padding: 11px 11px 13px;
}
.mini:hover .visual{ background: var(--block-2); }

.follow{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0 26px;
  font-size: 14px;
}
.follow .ff{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: var(--line) solid var(--ink);
  padding: 7px 13px;
}
.follow .ff svg{ width: 15px; height: 15px; color: var(--green); }
.follow .ff:hover{ background: var(--block-1); }
.follow .say{ color: rgba(28,26,23,.6); font-size: 13px; }

/* ══════ 404 ══════ */

.nf{ padding: 90px var(--pad) 110px; }
.nf h1{
  font-family: var(--sans);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
}
.nf p{ font-size: 15px; margin: 0 0 22px; }
.nf a.back{ display: inline-block; border: var(--line) solid var(--ink); padding: 9px 15px; font-size: 14px; }
.nf a.back:hover{ background: var(--block-1); }

/* ══════ 꼬리 ══════ */

footer.site{
  padding: 14px var(--pad) 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
footer.site .mark{ font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; }

/* ══════ 좁은 화면 ══════ */

@media (max-width: 1100px){
  :root{ --pad: 26px; --col-side: 300px; --bleed: 40px; }
  .headline{ font-size: 26px; }
  .dday{ padding-right: 165px; min-height: 152px; }
  .dday-count{ font-size: 40px; }
  .dday-art{ width: 138px; }
  .intro{ padding-bottom: 60px; }
  .article-title{ font-size: 34px; }
}

@media (max-width: 768px){
  :root{ --pad: 16px; --bleed: 16px; }
  body{ padding: 10px; }

  .topbar, .topbar.is-small{ flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; }
  .logo-link, .is-small .logo-link{ flex: none; width: 100%; }
  .logo-link img{ max-width: 260px; }
  .social{ padding-bottom: 0; }

  .intro{ grid-template-columns: 1fr; gap: 24px; padding: 22px var(--pad) 58px; }
  .dday{ padding: 18px 130px 16px 18px; min-height: 130px; }
  .dday-count{ font-size: 38px; }
  .dday-art{ width: 112px; right: 10px; top: 12px; }

  .menu{ justify-content: flex-start; gap: 4px 14px; font-size: 15px; }

  .grid{ grid-template-columns: 1fr; }
  .slot-wide, .slot-tall{ grid-column: auto; grid-row: auto; }
  .slot-stack{ display: contents; }
  .size-wide .title{ font-size: 21px; }
  .form-video .visual{ aspect-ratio: 4 / 5; }

  .rail{ grid-template-columns: 1fr; padding: 0 var(--pad); }
  .article-head{ grid-column: 1; padding: 26px 0 20px; }
  .article-side{ grid-column: 1; order: 1; }
  .article-body{ grid-column: 1; order: 2; padding-bottom: 40px; }
  .hero{ margin-bottom: 26px; }
  .hero .visual{ aspect-ratio: 16 / 9; }
  .receipt-panel{ position: static; margin-bottom: 30px; }

  .article-title{ font-size: 28px; }
  .article-body p{ font-size: 16.5px; line-height: 1.85; }
  .article-body > p:first-child{ font-size: 17.5px; }
  .article-body h2{ font-size: 21px; }
  .article-body blockquote{ font-size: 18px; }
  .article-body .alignwide, .article-body .wp-block-image.alignwide, .article-body figure.wide{
    width: calc(100% + 32px); margin-left: -16px;
  }

  .prevnext{ grid-template-columns: 1fr; }
  .pn.next{ text-align: left; }
  .more{ grid-template-columns: 1fr; }

  .nf{ padding: 60px var(--pad) 80px; }
  .headline{ font-size: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .flip-inner{ transition: none; }
}