/* 現行UIのグローバルCSS正本。localhost:4321 で確認。旧prototypeのCSSとは同期しない。 */
/* 共通：フォントファイル、色、操作状態、リセット。文字サイズ・余白・配置は下のPC／スマホを別々に編集する。 */
* {
  box-sizing: border-box;
}

:is(button, :where(a.button)),
input,
select,
textarea {
  color: inherit;
}

:is(button, :where(a.button)),
a,
input,
textarea,
select {
  touch-action: manipulation;
}

:is(button, :where(a.button)),
a {
  cursor: pointer;
}

:is(button, :where(a.button)) {
  border-width: 1px;
  border-style: solid;
  border-image: none;
}

a {
  color: inherit;
}

:is(button, :where(a.button)):focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: rgb(102, 102, 102) solid 3px;
  outline-offset: 3px;
}

.primary {
  color: rgb(255, 255, 255);
  background: rgb(23, 23, 23);
  border-color: rgb(23, 23, 23);
}

.primary:hover {
  background: rgb(68, 68, 68);
}

.quiet {
  border: 0px;
}

.prototype :is(button, :where(a.button)) {
  background: transparent;
}

.muted {
  color: rgb(102, 102, 102);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-width: 1px;
  border-style: solid;
  border-image: none;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: rgb(34, 34, 34);
}

.date strong {
  color: rgb(34, 34, 34);
}

.steps {
  color: rgb(119, 119, 119);
}

.steps strong {
  color: rgb(23, 23, 23);
}

.store {
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: white;
}

.dish {
  border-width: 1px;
  border-style: solid;
  border-image: none;
}

.dish summary,
details summary {
  cursor: pointer;
}

fieldset {
  border: 0px;
}

.choices label {
  border-width: 1px;
  border-style: solid;
  border-image: none;
}

.photo img {
  background: rgb(238, 238, 238);
}

.actions {
  border-top-width: 1px;
  border-top-style: solid;
}

.detail-dish {
  border-top: 1px solid rgb(187, 187, 187);
}

#notice {
  background: rgb(34, 34, 34);
  color: white;
}

.count {
  color: rgb(102, 102, 102);
}

.line {
  border-bottom: 1px solid rgb(204, 204, 204);
}

:is(button, :where(a.button)).link {
  border: 0px;
  background: none;
}

.guest-actions {
  border-top-width: 1px;
  border-top-style: solid;
}

.wire-controls {
  border-width: 1px;
  border-style: dashed;
  border-image: none;
}

.home-intro .row :is(button, :where(a.button)):first-child {
  background: rgb(34, 34, 34);
  color: white;
}

.home-section {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.home-card {
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: white;
}

.news-list li {
  border-top-width: 1px;
  border-top-style: solid;
}

.news-list time {
  color: rgb(102, 102, 102);
}

.home-footer :is(button, :where(a.button)) {
  border: 0px;
  background: none;
}

.screen-links a {
  border-width: 1px;
  border-style: solid;
  border-image: none;
  background: white;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/noto-variable.ttf") format("truetype");
}

:root {
  --color-accent: #ff4d46;
  --color-accent-hover: #f4443e;
  --color-text: #222;
  --color-muted: #707070;
  --color-danger: #aa2727;
  color: var(--color-text);
  background: var(--color-bg);
}

/* ページの長さで縦スクロールバーが変わっても共通ヘッダーを動かさない。 */
html {
  scrollbar-gutter: stable;
}

body {
  background: white;
}

:is(button, :where(a.button)) {
  border-color: var(--color-border);
  background: white;
}

:is(button, :where(a.button)).primary {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}

:is(button, :where(a.button)).primary:hover {
  background: rgb(68, 68, 68);
}

:is(button, :where(a.button)):disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

:is(button, :where(a.button)):focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: rgb(34, 34, 34) solid 2px;
  outline-offset: 3px;
}

.prototype {
  color: rgb(119, 119, 119);
}

.prototype :is(button, :where(a.button)) {
  border: 0px;
  color: rgb(102, 102, 102);
}

.brand .brand-dot {
  color: var(--color-accent);
}

.header nav a.active::after {
  content: "";
  background: var(--color-accent);
}

.eyebrow {
  color: var(--color-muted);
}

.muted,
.count {
  color: var(--color-muted);
}

.aside {
  background: white;
}

.aside hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--color-border);
}

.panel {
  border: 1px solid var(--color-border);
  background: white;
  box-shadow: var(--shadow);
}

.filters {
  background: var(--color-surface);
}

.tag-filter {
  border-bottom: 1px solid var(--color-border);
}

.tag-button,
.tag {
  border-color: var(--color-border);
}

.tabs :is(button, :where(a.button))[aria-pressed="true"],
.tag-button[aria-pressed="true"] {
  background: rgb(34, 34, 34);
  color: white;
  border-color: rgb(34, 34, 34);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: white;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: rgb(34, 34, 34);
}

input::placeholder,
textarea::placeholder {
  color: rgb(150, 150, 150);
}

.record {
  border-top-style:;
  border-top-width:;
  border-right-style:;
  border-right-width:;
  border-bottom-style:;
  border-bottom-width:;
  border-left-style:;
  border-left-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
  background: white;
}

.record:first-child {
  border-top: 1px solid var(--color-border);
}

.date {
  color: rgb(136, 136, 136);
}

.empty .heading-section {
  color: rgb(34, 34, 34);
}

.store {
  border-color: var(--color-border);
}

.selected-store {
  border-top-color:;
  border-top-style:;
  border-top-width:;
  border-right-color:;
  border-right-style:;
  border-right-width:;
  border-bottom-color:;
  border-bottom-style:;
  border-bottom-width:;
  border-image-source:;
  border-image-slice:;
  border-image-width:;
  border-image-outset:;
  border-image-repeat:;
}

.dish {
  border-color: var(--color-border);
}

details {
  border-bottom: 1px solid var(--color-border);
}

details:last-child {
  border: 0px;
}

.choices label {
  border-color: var(--color-border);
  background: white;
}

.actions {
  border-color: var(--color-border);
}

.error {
  color: var(--color-danger);
}

.error:not(:empty) {
  background: rgb(255, 246, 245);
}

.line,
.detail-dish {
  border-color: var(--color-border);
}

.guest-banner {
  color: rgb(102, 102, 102);
}

.guest-actions {
  border-color: var(--color-border);
}

.wire-controls {
  border-color: var(--color-border);
  background: rgb(250, 250, 250);
}

.home-intro {
  border: 0px;
  background: white;
}

.home-intro .ui-description {
  color: rgb(119, 119, 119);
}

.daily-note {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.daily-note .heading-section svg {
  color: var(--color-accent);
}

.home-intro .row :is(button, :where(a.button)),
.home-intro .row :is(button, :where(a.button)):first-child {
  color: rgb(34, 34, 34);
  background: rgb(246, 246, 246);
  border: 0px;
}

.home-section {
  border-color: var(--color-border);
}

.home-card {
  border-color: var(--color-border);
  box-shadow: var(--shadow);
}

.news-list li {
  border-color: var(--color-border);
}

.site-footer {
  border-top: 1px solid var(--color-border);
}

.footer-brand span {
  color: var(--color-accent);
}

.site-footer .ui-description {
  color: rgb(119, 119, 119);
}

.site-footer small {
  color: rgb(136, 136, 136);
}

.screen-links a {
  border-color: var(--color-border);
}

.profile-initial {
  border: 0px;
  background: rgb(243, 243, 243);
}

.daily-shortcuts a {
  border: 1px solid var(--color-border);
}

.route-login .layout > div,
.route-verify .layout > div,
.route-onboarding .layout > div {
  border: 1px solid var(--color-border);
}

.route-login .aside,
.route-verify .aside,
.route-onboarding .aside {
  border: 0px;
}

.route-settings .screen-links a:last-child {
  color: var(--color-danger);
}

.route-record-start .panel .heading-section::before {
  content: "＋";
  color: var(--color-accent);
}

.swatch {
  border: 1px solid var(--color-border);
}

.token-name {
  color: rgb(119, 119, 119);
}

.ds-section .heading-section {
  border-bottom: 1px solid var(--color-border);
}

.ds-spacing div {
  background: rgb(240, 240, 240);
}

.page-inventory a {
  border: 1px solid var(--color-border);
}

.page-inventory small {
  color: rgb(136, 136, 136);
}

.event-cover {
  background: rgb(246, 246, 246);
}

.event-cover strong::before {
  color: var(--color-accent);
}

.route-profile .topline .heading-page::before {
  content: "◎";
  color: rgb(153, 153, 153);
  background: rgb(243, 243, 243);
}

.route-terms .panel,
.route-privacy .panel {
  box-shadow: none;
}

.home-identity {
  border-bottom: 1px solid var(--color-border);
}

.home-avatar {
  color: var(--color-accent);
}

.home-kicker {
  color: rgb(119, 119, 119);
}

.home-identity .ui-description {
  color: rgb(112, 112, 112);
}

.home-local-nav a[aria-current] {
  background: var(--color-inset);
}

.home-local-nav a[aria-current] svg {
  color: var(--color-accent);
}

.home-private-note {
  color: rgb(112, 112, 112);
  border-top: 1px solid var(--color-border);
}

.home-settings {
  color: rgb(112, 112, 112);
}

.home-compose {
  border: 1px solid var(--color-border);
  background: white;
  box-shadow: rgba(34, 34, 34, 0.016) 0px 6px 24px;
}

.home-heading .ui-description {
  color: rgb(112, 112, 112);
}

.home-compose-actions :is(:is(button, :where(a.button)), a) {
  border-color: rgb(230, 230, 230);
}

.home-compose-actions :is(:is(button, :where(a.button)), a):hover {
  background: rgb(242, 242, 242);
  border-color: rgb(170, 170, 170);
}

.home-action-plus {
  color: var(--color-accent);
}

.home-compose-actions small {
  color: rgb(112, 112, 112);
}

.home-compose-foot {
  color: rgb(119, 119, 119);
}

.home-notebook {
  border: 1px solid var(--color-border);
}

.home-notebook > .ui-description {
  color: rgb(112, 112, 112);
}

.home-entry + .home-entry {
  border-top: 1px solid var(--color-border);
}

.home-entry small {
  color: rgb(112, 112, 112);
}

.home-section-copy {
  color: rgb(112, 112, 112);
}

.home-store-entry {
  border-top: 1px solid var(--color-border);
}

.home-side-section .home-card {
  border: 0px;
  box-shadow: none;
}

.home-side-section :is(.article-summary, .event-venue, .empty-message) {
  color: rgb(112, 112, 112);
}

.event-cover span {
  color: rgb(119, 119, 119);
}

.home-news {
  border-bottom: 1px solid var(--color-border);
}

.home-news time {
  color: rgb(119, 119, 119);
}

.home-preview-options {
  border-top: 1px solid var(--color-border);
}

.home-preview-options summary {
  color: rgb(119, 119, 119);
}

:root {
  --shadow: none;
  --color-border: #e9e9e9;
}

.header {
  background: rgb(255, 255, 255);
  box-shadow: none;
  border-bottom: 1px solid var(--color-border);
}

.header .nav-create {
  background: rgb(34, 34, 34);
  color: white;
}

.account-link {
  background: transparent;
  border: 1px solid var(--color-border);
}

.site-menu {
  border: 0px;
}

.site-menu summary {
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.site-menu[open] summary {
  background: var(--color-inset);
}

.site-menu > div {
  background: white;
  border: 1px solid var(--color-border);
  box-shadow: rgba(0, 0, 0, 0.047) 0px 8px 24px;
}

.site-menu a:hover {
  background: var(--color-inset);
}

.site-footer,
.route-home .site-footer {
  border-top: 1px solid var(--color-border);
}

.aside {
  border-top: 0px;
  border-right: 0px;
  border-bottom: 0px;
  border-image: none;
  border-left: 1px solid var(--color-border);
  box-shadow: none;
}

.route-login .layout > div,
.route-verify .layout > div,
.route-onboarding .layout > div {
  box-shadow: none;
}

:is(button, :where(a.button)) {
  box-shadow: none;
}

.quiet {
  background: transparent;
}

.panel,
.home-card,
.record,
.store,
.dish,
.sensory,
.filters,
.daily-note,
.selected-store,
.screen-links a,
.page-inventory a {
  box-shadow: none;
}

.record {
  border-color: var(--color-border);
}

.selected-store {
  border-left: 1px solid var(--color-border);
  background: rgb(250, 250, 250);
}

.sensory {
  background: rgb(250, 250, 250);
}

.empty {
  border: 1px solid var(--color-border);
  background: rgb(250, 250, 250);
  color: rgb(112, 112, 112);
}

.guest-banner {
  border: 1px solid var(--color-border);
  background: rgb(250, 250, 250);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-color: rgb(216, 216, 216);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgb(119, 119, 119);
}

.choices label:has(input:checked) {
  background: rgb(245, 245, 245);
  border-color: rgb(136, 136, 136);
}

.tabs :is(button, :where(a.button))[aria-pressed="true"] {
  background: rgb(242, 242, 242);
  color: rgb(34, 34, 34);
  border-color: rgb(222, 222, 222);
}

.tag-button {
  background: rgb(250, 250, 250);
  border-color: transparent;
}

.tag-button[aria-pressed="true"] {
  background: rgb(237, 237, 237);
  border-color: rgb(170, 170, 170);
  color: rgb(34, 34, 34);
}

.tag {
  border: 0px;
  background: rgb(244, 244, 244);
}

.tag.dark {
  border: 0px;
  background: rgb(244, 244, 244);
}

.screen-links a:hover {
  background: rgb(250, 250, 250);
}

.ds-callout {
  border: 1px solid var(--color-border);
  background: rgb(250, 250, 250);
}

.ds-spacing div {
  border-top: 2px solid rgb(170, 170, 170);
}

dialog {
  border: 1px solid var(--color-border);
  box-shadow: rgba(0, 0, 0, 0.133) 0px 12px 48px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.333);
}

#notice {
  box-shadow: none;
}

.home-compose,
.home-notebook {
  box-shadow: none;
}

.home-compose-actions :is(:is(button, :where(a.button)), a) {
  background: white;
}

.home-avatar {
  border: 0px;
}

.entry-icon {
  background: transparent;
}

.home-discovery-grid .home-card {
  box-shadow: none;
}

.home-side-section .event-cover {
  border: 1px solid var(--color-border);
  background: rgb(250, 250, 250);
}

.prototype {
  background: rgb(250, 250, 250);
}

.event-cover strong::before {
  content: none;
}

.heading-page[tabindex="-1"]:focus {
  outline: none;
}

.store-search select:disabled,
.event-filters select:disabled {
  background: var(--color-inset);
  color: rgb(119, 119, 119);
  cursor: not-allowed;
}

.event-filters {
  border: 1px solid var(--color-border);
}

.event-filters fieldset {
  border: 0px;
}

.event-tag-options label {
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.event-tag-options label:has(input:checked) {
  background: rgb(246, 246, 246);
  border-color: rgb(153, 153, 153);
}

.event-filter-error {
  color: var(--color-danger);
}

.event-meta {
  color: rgb(102, 102, 102);
}

.event-results .event-cover {
  background: rgb(250, 250, 250);
}

.panel-search.event-filters {
  border: 0px;
}

.filter-trigger {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(221, 221, 221);
}

.filter-chips :is(button, :where(a.button)) {
  background: rgb(245, 245, 245);
  border: 0px;
}

.filter-dialog {
  border: 0px;
  color: rgb(34, 34, 34);
  box-shadow: rgba(0, 0, 0, 0.133) 0px 16px 70px;
}

.filter-dialog::backdrop {
  background: rgba(23, 23, 23, 0.5);
}

.filter-dialog header {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.filter-dialog header :is(button, :where(a.button)) {
  border: 0px;
  background: transparent;
}

.filter-dialog footer {
  border-top: 1px solid rgb(238, 238, 238);
}

.region-row {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.region-row input,
.event-tag-options input {
  accent-color: rgb(255, 77, 70);
}

.unread-dot {
  background: rgb(255, 77, 70);
}

.notification-item {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.notification-date {
  color: rgb(119, 119, 119);
}

.notification-marker {
  background: transparent;
}

.is-unread .notification-marker {
  background: rgb(255, 77, 70);
}

.is-unread {
  background: rgb(250, 250, 250);
}

.route-design-system .type-guide-card {
  border: 1px solid rgb(233, 233, 233);
}

.route-design-system .type-guide-card dt {
  color: rgb(112, 112, 112);
}

.route-design-system .type-guide-samples {
  border-top: 1px solid rgb(238, 238, 238);
}

.route-design-system .type-guide-samples small {
  color: rgb(112, 112, 112);
}

.route-design-system .type-guide-card details {
  border: 0px;
}

.route-design-system .type-guide-card summary {
  color: rgb(112, 112, 112);
}

.store-search > .filter-trigger,
.store-search > input,
.store-search > :is(button, :where(a.button))[type="submit"] {
  box-sizing: border-box;
}

.store-search > .filter-trigger:disabled {
  color: rgb(153, 153, 153);
  background: rgb(250, 250, 250);
  cursor: not-allowed;
}

.region-row input[type="radio"],
.municipality-grid input {
  accent-color: rgb(255, 77, 70);
}

:is(button, :where(a.button)).primary:not(:disabled),
.header .nav-create {
  background: rgb(255, 77, 70);
  border-color: rgb(255, 77, 70);
  color: rgb(255, 255, 255);
}

:is(button, :where(a.button)).primary:not(:disabled):hover,
.header .nav-create:hover {
  background: rgb(244, 68, 62);
  border-color: rgb(244, 68, 62);
}

.mobile-bottom .create .ui-icon,
.mobile-bottom a.active.create .ui-icon {
  background: rgb(255, 77, 70);
  color: rgb(255, 255, 255);
}

.banner-slides {
  background: white;
}

.banner-controls :is(button, :where(a.button)) {
  border: 0px;
  background: transparent;
  color: rgb(112, 112, 112);
}

.banner-dots span {
  background: rgb(204, 204, 204);
}

.banner-dots [aria-pressed="true"] span {
  background: rgb(255, 77, 70);
}

.banner-controls :is(button, :where(a.button)):focus-visible,
.banner-slide:focus-visible {
  outline: rgb(34, 34, 34) solid 2px;
  outline-offset: -2px;
}

:root {
  --color-bg: #f7f7f7;
  --color-surface: #fff;
  --color-inset: #f7f7f7;
}

html,
body {
  background: var(--color-bg);
}

main,
.route-home main {
  background: transparent;
}

.header,
.mobile-bottom {
  background: rgb(255, 255, 255);
}

.home-left,
.home-compose,
.home-notebook,
.home-discover,
.home-store-entry,
.home-side-section {
  background: rgb(255, 255, 255);
  border: 0px;
  box-shadow: none;
}

.home-discovery-grid .home-card {
  border: 0px;
  background: transparent;
}

.home-side-section .home-card {
  background: transparent;
}

.home-compose-actions :is(:is(button, :where(a.button)), a),
.home-local-nav a[aria-current],
.entry-icon {
  background: var(--color-inset);
}

.panel,
.record,
.store,
.home-card,
.filters,
.selected-store,
.empty,
.dish,
.daily-note,
.notification-list,
.screen-links a,
.page-inventory a {
  background: rgb(255, 255, 255);
  border-color: transparent;
  box-shadow: none;
}

.aside:not(:empty) {
  background: rgb(255, 255, 255);
  border: 0px;
}

:is(
    .route-login,
    .route-verify,
    .route-onboarding,
    .route-settings,
    .route-settings-profile,
    .route-profile-preview,
    .route-contact,
    .route-help,
    .route-terms,
    .route-privacy
  )
  .layout
  > div {
  background: rgb(255, 255, 255);
}

.route-stores .store-search,
.route-events .event-filters {
  background: rgb(255, 255, 255);
}

.sensory,
.choices label:has(input:checked),
.ds-callout {
  background: var(--color-inset);
}

:is(button, :where(a.button)):hover {
  background: rgb(240, 240, 240);
}

.site-footer,
.route-home .site-footer {
  background: transparent;
}

.activity-stats > div {
  background: var(--color-inset);
}

.activity-record {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.activity-record:last-child {
  border: 0px;
}

.municipality-grid input[type="checkbox"] {
  accent-color: rgb(255, 77, 70);
}
.mypage-tabs {
  background: rgb(255, 255, 255);
}

.mypage-tabs a[aria-current="page"] {
  background: var(--color-inset);
}

.mypage-tabs a:hover {
  background: var(--color-inset);
}
.profile-summary {
  background: rgb(255, 255, 255);
}

.profile-fallback {
  background: var(--color-inset);
  color: rgb(136, 136, 136);
}

.store-registration-entry {
  color: rgb(112, 112, 112);
}

.journal-extras details {
  border-top: 1px solid rgb(238, 238, 238);
}

.journal-extras summary {
  cursor: pointer;
}

.reference-item {
  border: 1px solid rgb(230, 230, 230);
}

.public-filter-sidebar {
  background: rgb(255, 255, 255);
}

.public-filter-sidebar .filters {
  border: 0px;
}

.public-record-date {
  color: var(--color-muted);
}

.public-record .record-excerpt {
  color: rgb(34, 34, 34);
}

.home-discovery-grid .home-card + .home-card {
  border-top: 1px solid var(--color-border);
}

.home-post-images a:focus-visible {
  outline: rgb(34, 34, 34) solid 2px;
  outline-offset: 3px;
}

.record-preview-date {
  color: var(--color-muted);
}

.public-filter-sidebar .tabs :is(button, :where(a.button)) {
  border: 0px;
  background: transparent;
  color: rgb(112, 112, 112);
}

.public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"] {
  border: 0px;
  color: rgb(34, 34, 34);
}

.public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
  content: "";
  background: rgb(255, 77, 70);
}

.public-filter-sidebar .tabs :is(button, :where(a.button)):hover {
  color: rgb(34, 34, 34);
  background: transparent;
}

.profile-links a {
  color: rgb(34, 34, 34);
}

.profile-links a:hover {
  background: var(--color-inset);
}

.profile-links a:focus-visible {
  outline: rgb(255, 77, 70) solid 2px;
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
    [type="file"]
  ),
select {
  box-sizing: border-box;
}

:root {
  --color-selected: #f8f1e9;
}

.home-local-nav a[aria-current],
.mypage-tabs a[aria-current="page"],
.tabs :is(button, :where(a.button))[aria-pressed="true"],
.tag-button[aria-pressed="true"],
.choices label:has(input:checked),
.event-tag-options label:has(input:checked) {
  background: var(--color-selected);
  color: rgb(34, 34, 34);
}

.public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"] {
  background: transparent;
}

.journal-input-heading input.journal-date {
  border: 0px;
  background: transparent;
  color: rgb(112, 112, 112);
}

.journal-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.journal-date:focus-visible {
  outline: rgb(34, 34, 34) solid 2px;
  outline-offset: 2px;
}

.filter-dialog label.is-empty {
  color: rgb(170, 170, 170);
  background: transparent;
  cursor: not-allowed;
}

.filter-dialog label.is-empty:has(input:checked) {
  cursor: pointer;
}

.filter-dialog input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.facet-count {
  color: rgb(112, 112, 112);
}

.is-empty .facet-count {
  color: rgb(170, 170, 170);
}

.home-account-tools a {
  color: rgb(112, 112, 112);
}

.home-account-tools a:hover {
  background: rgb(248, 241, 233);
  color: rgb(34, 34, 34);
}

.home-account-stats {
  border-block: 1px solid rgb(230, 230, 230);
}

.home-account-stats span {
  color: rgb(112, 112, 112);
}

.home-account-links a > span {
  color: rgb(112, 112, 112);
}
.journal-kind-tabs {
  border-bottom: 1px solid rgb(230, 230, 230);
}

.journal-kind-tabs :is(button, :where(a.button)) {
  border: 0px;
  background: transparent;
  color: rgb(112, 112, 112);
}

.journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"] {
  color: rgb(34, 34, 34);
}

.journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
  content: "";
  background: rgb(255, 77, 70);
}

.journal-kind-tabs :is(button, :where(a.button)):disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.journal-dishes .dish:first-child {
  border-top: 0px;
}

.record-filter-panel {
  border: 0px;
}

.record-filter-panel > summary {
  cursor: pointer;
}

.record-meta-row .record-date {
  color: rgb(112, 112, 112);
}

.compact-record .record-excerpt {
  color: rgb(34, 34, 34);
}

.list-create-link {
  background: rgb(255, 77, 70);
  color: rgb(255, 255, 255);
}

.list-search-result {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.list-search-result small {
  color: rgb(112, 112, 112);
}
body:is([data-page-layout="focused"], [data-page-layout="auth"])
  main
  > .layout
  > div:has(.panel) {
  background: transparent;
}

body[data-page-layout="focused"] main > .layout > .aside,
body[data-page-layout="auth"] main > .layout > .aside {
  border: 0px;
}

.profile-public-link {
  color: rgb(112, 112, 112);
}

.profile-public-link:hover {
  background: rgb(248, 241, 233);
  color: rgb(34, 34, 34);
}

.profile-public-link:focus-visible {
  outline: rgb(255, 77, 70) solid 2px;
  outline-offset: 2px;
}
a.text-link {
  color: #ff4d46;
}
.editorial-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.magazine-card img {
  background: #e9e7dc;
}
.magazine-published {
  color: #888;
}
.date-filter-field {
  border: 1px solid #d8d8d8;
  background: #fff;
}
.date-filter-label {
  color: #707070;
}
.date-filter-field input.date-filter-input[type="date"] {
  border: 0;
  background: transparent;
}
.date-filter-field:focus-within {
  outline: 2px solid #ff4d46;
  outline-offset: 2px;
}
.date-filter-field .date-filter-input:focus-visible {
  outline: none;
}
.store-area {
  color: var(--muted, #777);
}
.store-primary-actions a.button {
  border: 1px solid #ddd;
}
.store-info-row {
  border-bottom: 1px solid #eee;
}
.store-info-row:last-child {
  border-bottom: 0;
}
.store-social-link {
  color: #ff4d46;
}
.store-extra-fields summary {
  cursor: pointer;
}

.store-primary-actions [data-portal="visit"] {
  background: #ff4d46;
  border-color: #ff4d46;
  color: #fff;
}

.store-map {
  border: 0;
}
.store-choice-field {
  border: 0;
}
.store-choice-options input {
  accent-color: #ff4d46;
}
.policy-status {
  color: var(--color-muted);
}
.policy-nav {
  border-top: 1px solid var(--color-border);
}
.policy-nav [aria-current="page"] {
  color: var(--color-text);
}
/* PC専用：760pxより広い画面。スマホの指定には依存しない。 */
@media (width > 760px) {
  .site-body {
    font-size: 16px;
  }
  :root {
    --font-record-body: 16px;
    --font-record-excerpt: 14px;
    --font-record-date: 12px;
    --font-description: 16px;
  }
  .record-body {
    font-size: var(--font-record-body);
  }
  .record-excerpt {
    font-size: var(--font-record-excerpt);
  }
  .record-excerpt--feed {
    font-size: 13px;
  }
  .record-excerpt.record-excerpt--activity {
    font-size: 16px;
    line-height: 1.85;
  }
  .record-sensory-note {
    font-size: 14px;
  }
  .record-date {
    font-size: var(--font-record-date);
  }
  .comment-body {
    font-size: 16px;
  }
  .profile-bio {
    font-size: 16px;
  }
  .store-address {
    font-size: 16px;
  }
  .article-summary {
    font-size: 16px;
  }
  .article-body {
    font-size: 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .article-date {
    font-size: 14px;
  }
  .record-byline {
    font-size: 12px;
  }
  .event-venue {
    font-size: 12px;
  }
  .notification-message {
    font-size: 16px;
  }
  .notification-date {
    font-size: 12px;
  }
  .form-error {
    font-size: 14px;
  }
  .policy-body {
    font-size: 16px;
  }
  .reference-description {
    font-size: 16px;
  }
  .list-description {
    font-size: 16px;
  }
  .list-note {
    font-size: 16px;
  }
  .record-author-name {
    font-size: 16px;
  }
  .activity-value {
    font-size: 16px;
  }
  .result-count {
    font-size: 14px;
  }
  .empty-message {
    font-size: 16px;
  }
  .navigation-copy {
    font-size: 16px;
  }
  .submitted-note {
    font-size: 16px;
  }
  .ui-description {
    font-size: var(--font-description);
  }
  .aside :is(.profile-bio, .navigation-copy, .ui-description) {
    font-size: 14px;
  }

  body {
    margin: 0px;
  }

  :is(button, :where(a.button)),
  input,
  select,
  textarea {
    font: inherit;
  }

  a {
    text-underline-offset: 4px;
  }

  .quiet {
    padding: 6px;
  }

  .prototype {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .header {
    margin: auto;
    display: flex;
    justify-content: space-between;
  }

  .brand {
    text-decoration: none;
  }

  .brand span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    margin-top: 10px;
  }

  nav {
    display: flex;
    gap: 0;
    font-size: 14px;
  }

  main {
    margin: auto;
  }

  .heading-section {
    margin: 0px 0px 18px;
  }

  .heading-item {
    margin: 0px 0px 12px;
  }

  :where(
    .activity-value,
    .article-date,
    .article-summary,
    .comment-body,
    .empty-message,
    .event-venue,
    .form-error,
    .list-description,
    .list-note,
    .navigation-copy,
    .notification-message,
    .policy-body,
    .profile-bio,
    .record-author-name,
    .record-body,
    .record-byline,
    .record-excerpt,
    .record-sensory-note,
    .reference-description,
    .result-count,
    .store-address,
    .submitted-note,
    .ui-description
  ) {
    margin: 0px 0px 16px;
  }

  .muted {
    font-size: 14px;
  }

  .topline {
    display: flex;
    justify-content: space-between;
  }

  .topline .ui-description {
    margin-bottom: 0px;
  }

  .layout {
    display: grid;
  }

  .aside ol {
    padding-left: 22px;
  }

  .aside li {
    margin-bottom: 14px;
  }

  .filters {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 20px;
  }

  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .between {
    justify-content: space-between;
  }

  label,
  .field {
    display: block;
    font-size: 14px;
    margin-bottom: 18px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    width: 100%;
    margin-top: 6px;
  }

  textarea {
    resize: vertical;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
  }

  input[type="file"] {
    font-size: 14px !important;
  }

  .tabs {
    display: flex;
    margin-bottom: 20px;
  }

  .record {
    display: grid;
  }

  .date strong {
    display: block;
    line-height: 1.4;
  }

  .record .record-excerpt {
    margin: 8px 0px;
  }

  .tag {
    display: inline-block;
  }

  .empty {
    text-align: center;
  }

  .steps {
    display: flex;
  }

  .store {
    margin-bottom: 12px;
  }

  .store .store-address {
    margin: 4px 0px 12px;
  }

  .store .row {
    align-items: flex-start;
  }

  .selected-store {
    margin-bottom: 22px;
  }

  .selected-store .ui-description {
    margin: 4px 0px;
  }

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
  }

  .section-title .heading-section {
    margin: 0px;
  }

  .dish .row label {
    flex: 1 1 0%;
  }

  .dish summary,
  details summary {
    padding: 12px 0px;
    font-weight: 600;
  }

  fieldset {
    padding: 0px;
    margin: 0px 0px 18px;
  }

  legend {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .choices {
    display: flex;
    flex-wrap: wrap;
  }

  .choices label {
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .sensory {
    margin-top: 12px;
  }

  .sensory label {
    font-size: 14px;
  }

  .photos {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .photo {
    width: 145px;
  }

  .photo img {
    width: 145px;
    height: 110px;
    object-fit: cover;
    display: block;
  }

  .photo select {
    font-size: 12px;
    padding: 4px;
  }

  .photo :is(button, :where(a.button)) {
    font-size: 12px;
    padding: 3px 6px;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
  }

  .error {
    font-size: 14px;
    white-space: pre-wrap;
  }

  .text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .detail-dish {
    padding: 24px 0px;
  }

  .detail-dish .heading-section {
    margin: 0px 0px 8px;
  }

  .detail-dish:last-child {
    padding-bottom: 0px;
  }

  .guest-banner {
    margin-bottom: 24px;
  }

  dialog {
    max-width: 560px;
    width: calc(100% - 32px);
    max-height: 85vh;
    overflow: auto;
  }

  dialog .heading-section {
    margin-right: 20px;
  }

  dialog ol {
    padding-left: 22px;
  }

  #notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    display: none;
    font-size: 14px;
  }

  #notice.on {
    display: block;
  }

  .count {
    font-size: 14px;
  }

  .line {
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  .thin {
    font-size: 14px;
  }

  :is(button, :where(a.button)).link {
    padding: 0px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .guest-actions {
    padding-top: 20px;
  }

  .spaced {
    margin-top: 20px;
  }

  .tag-filter {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 24px;
  }

  .tag-filter .heading-section {
    margin-bottom: 6px;
  }

  .tag-button {
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .record-tags {
    margin: 12px 0px 18px;
  }

  .record-tags:empty {
    display: none;
  }

  .header nav :is(button, :where(a.button)) {
    font-size: 13px;
    padding: 3px 10px;
  }

  .brand {
    flex-shrink: 0;
  }

  .wire-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .wire-controls label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px;
  }

  .wire-controls select {
    width: auto;
    margin: 0px;
  }

  .home-grid {
    display: grid;
  }

  .home-card {
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .record-cover {
    object-fit: cover;
    display: block;
  }

  .store-search label {
    margin: 0px;
  }

  .store-search :is(button, :where(a.button)) {
    margin-bottom: 0px;
  }

  .news-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  .news-list li {
    display: flex;
    gap: 24px;
    padding: 18px 0px;
  }

  .news-list time {
    white-space: nowrap;
  }

  .home-footer {
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 30px;
  }

  .home-footer :is(button, :where(a.button)) {
    font-size: 13px;
    padding: 0px;
    text-decoration: underline;
  }

  .layout .home-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .screen-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .screen-links a {
    overflow-wrap: anywhere;
  }

  .profile-initial {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 26px;
  }

  :root {
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    font-family: "Noto Sans JP", sans-serif;
  }

  html {
    scroll-padding-top: 110px;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  :is(button, :where(a.button)) {
    font-size: 14px;
    line-height: 1.5;
  }

  .prototype {
    padding: 7px 24px;
    gap: 15px;
    justify-content: center;
    line-height: 1.6;
  }

  .prototype a {
    font-size: 12px;
  }

  .prototype :is(button, :where(a.button)) {
    min-height: 28px;
    padding: 2px 7px;
    font-size: 12px;
    margin: 0px;
  }

  .header {
    position: sticky;
    top: 0px;
    z-index: 20;
    align-items: center;
  }

  .brand {
    font-size: 30px;
    letter-spacing: -1.8px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  .brand .brand-dot {
    display: inline;
    font: inherit;
    letter-spacing: inherit;
    margin: 0px;
  }

  .header nav {
    max-width: none;
  }

  .header nav a {
    padding: 6px 0px;
  }

  .header nav a.active {
    position: relative;
  }

  .header nav a.active::after {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 4px;
  }

  .account-link {
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 14px;
  }

  .header nav a[href="/"],
  .header nav a[href="/mypage/saved"] {
    display: none;
  }

  main {
    max-width: 1180px;
    padding: 40px 24px 64px;
    min-height: 50vh;
  }

  .heading-page {
    margin: 5px 0px 12px;
    font-weight: 700;
  }

  .heading-section {
    line-height: 1.55;
  }

  .heading-item {
    line-height: 1.7;
  }

  :where(
    .activity-value,
    .article-date,
    .article-summary,
    .comment-body,
    .empty-message,
    .event-venue,
    .form-error,
    .list-description,
    .list-note,
    .navigation-copy,
    .notification-message,
    .policy-body,
    .profile-bio,
    .record-author-name,
    .record-body,
    .record-byline,
    .record-excerpt,
    .record-sensory-note,
    .reference-description,
    .result-count,
    .store-address,
    .submitted-note,
    .ui-description
  ) {
    line-height: 1.85;
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 1.3px;
  }

  .muted,
  .count {
    font-size: 14px;
  }

  .small {
    font-size: 12px;
  }

  .aside {
    font-size: 14px;
    align-self: start;
    line-height: 1.9;
  }

  .aside .heading-section {
    font-size: 16px;
  }

  .aside hr {
    margin: 22px 0px;
  }

  .panel {
    border-radius: var(--radius-card);
    margin-bottom: 24px;
  }

  .panel > .heading-section {
    margin-bottom: 18px;
  }

  .topline {
    align-items: center;
    margin-bottom: 28px;
  }

  .topline .ui-description {
    font-size: 14px;
  }

  .topline > .row {
    gap: 8px;
  }

  .topline > .row :is(button, :where(a.button)) {
    font-size: 13px;
  }

  .row {
    gap: 10px;
  }

  .filters {
    border-radius: var(--radius-card);
    gap: 16px;
  }

  .filters label {
    margin: 0px;
  }

  .tag-filter {
    padding-bottom: 24px;
  }

  .tag-filter .heading-section {
    font-size: 16px;
  }

  .tag-filter .ui-description {
    font-size: 13px;
  }

  .tag-button,
  .tag {
    border-radius: var(--radius-pill);
    font-size: 12px;
  }

  .tabs {
    gap: 8px;
  }

  .tabs :is(button, :where(a.button)) {
    padding: 9px 20px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.6;
  }

  textarea {
    min-height: 130px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  label,
  .field,
  legend {
    font-size: 14px;
    font-weight: 400;
  }

  label .muted {
    font-size: 12px;
  }

  .record {
    border-radius: var(--radius-card);
    margin-bottom: 18px;
    grid-template-columns: 65px minmax(0px, 1fr);
    gap: 20px;
  }

  .record .heading-section {
    margin: 8px 0px;
  }

  .date {
    font-size: 12px;
  }

  .date strong {
    letter-spacing: -1px;
  }

  .record-preview {
    width: 100%;
    max-height: 290px;
    object-fit: cover;
    border-radius: 14px;
    margin: 15px 0px;
  }

  .empty {
    padding: 42px 24px;
    font-size: 14px;
    line-height: 1.9;
  }

  .empty .heading-section {
    font-size: 16px;
  }

  .store {
    border-radius: var(--radius-card);
    padding: 24px;
    margin-top: 18px;
  }

  .store .heading-section {
    font-size: 19px;
  }

  .selected-store {
    border-radius: 12px;
    padding: 18px 22px;
  }

  .selected-store .ui-description {
    font-size: 14px;
  }

  .steps {
    font-size: 13px;
    margin: 8px 0px 25px;
  }

  .dish {
    border-radius: 16px;
    margin-top: 20px;
  }

  details {
    padding: 5px 0px;
  }

  details summary {
    font-size: 14px;
    min-height: 48px;
  }

  .sensory {
    border-radius: 16px;
    padding: 23px;
  }

  .sensory fieldset {
    margin-bottom: 25px;
  }

  .choices {
    gap: 8px;
  }

  .choices label {
    padding: 9px 12px;
    font-size: 14px;
  }

  .photos {
    gap: 16px;
  }

  .photo img {
    border-radius: 12px;
  }

  .photo select,
  .photo :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 34px;
  }

  .actions {
    gap: 12px;
  }

  .error:empty {
    display: none;
  }

  .error:not(:empty) {
    padding: 12px 16px;
    margin: 15px 0px;
  }

  .guest-banner {
    font-size: 13px;
    padding: 15px 18px;
  }

  dialog :is(.ui-description, .empty-message, .navigation-copy),
  dialog li {
    font-size: 14px;
  }

  #notice {
    z-index: 50;
    padding: 13px 22px;
  }

  .wire-controls {
    border-radius: 14px;
    font-size: 12px;
    padding: 12px 16px;
    margin-bottom: 26px;
  }

  .wire-controls :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 34px;
  }

  .wire-controls strong {
    font-size: 12px;
  }

  .wire-controls select {
    font-size: 12px;
    min-height: 36px;
    padding: 5px 10px;
  }

  .wire-controls .muted {
    font-size: 12px;
  }

  .home-intro {
    padding: 12px 0px 35px;
    display: grid;
    grid-template-columns: minmax(0px, 1fr) 420px;
    align-items: center;
    gap: 35px;
  }

  .home-intro .heading-page {
    font-size: 31px;
    line-height: 1.55;
    letter-spacing: -1px;
  }

  .home-intro .ui-description {
    font-size: 14px;
  }

  .daily-note {
    border-radius: 24px;
    padding: 24px;
  }

  .daily-note .heading-section {
    font-size: 18px;
    margin: 0px 0px 7px;
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .daily-note .ui-description {
    font-size: 13px;
    margin: 0px 0px 18px;
  }

  .daily-note .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .home-intro .row :is(button, :where(a.button)),
  .home-intro .row :is(button, :where(a.button)):first-child {
    font-size: 13px;
    min-height: 52px;
    white-space: nowrap;
    padding: 10px;
  }

  .daily-note .note-help {
    font-size: 12px;
    margin: 12px 0px;
  }

  .daily-note .note-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
  }

  .home-section {
    padding: 34px 0px;
  }

  .home-grid {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .home-card {
    border-radius: 18px;
  }

  .home-card .heading-item {
    font-size: 18px;
    margin: 12px 0px;
  }

  .home-card :is(.article-summary, .event-venue, .record-byline) {
    font-size: 13px;
  }

  .home-card .muted {
    font-size: 12px;
  }

  .record-cover {
    height: 200px;
    width: 100%;
    border-radius: 12px;
    margin: 0px 0px 15px;
  }

  .editorial-cover {
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 18px;
  }

  .article-hero {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: 20px;
    margin: 8px 0px 25px;
  }

  .home-card .tag-button {
    font-size: 12px;
    padding: 5px 10px;
  }

  .section-title a {
    font-size: 14px;
    white-space: nowrap;
  }

  .news-list li {
    font-size: 14px;
  }

  .news-list time {
    font-size: 12px;
  }

  .home-footer {
    display: none;
  }

  .site-footer {
    max-width: 1132px;
    margin: 0px auto;
    padding: 34px 0px;
  }

  .footer-brand {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -1.6px;
  }

  .site-footer .ui-description {
    margin: 8px 0px 20px;
  }

  .site-footer > div {
    display: flex;
    flex-wrap: wrap;
    margin-top:20px;
  }

  .site-footer small {
    display: block;
    margin-top: 24px;
  }

  .screen-links {
    gap: 12px;
  }

  .screen-links a {
    border-radius: 13px;
    font-size: 14px;
    min-width: 0px;
  }

  .screen-links :is(button, :where(a.button)) {
    text-align: left;
  }

  .profile-initial {
    font-weight: 700;
  }

  .mobile-bottom {
    display: none;
  }

  .ui-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .daily-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0px 0px 10px;
  }

  .daily-shortcuts a {
    padding: 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
  }

  .route-login .layout,
  .route-verify .layout,
  .route-onboarding .layout {
    justify-content: center;
  }

  .route-login .topline,
  .route-verify .topline,
  .route-onboarding .topline {
    margin: 0px auto 24px;
  }

  .route-login .layout > div,
  .route-verify .layout > div,
  .route-onboarding .layout > div {
    padding: 28px;
  }

  .route-login .aside,
  .route-verify .aside,
  .route-onboarding .aside {
    padding: 8px 0px;
  }

  .route-verify input[name="code"] {
    font-size: 28px;
    letter-spacing: 0.3em;
    text-align: center;
  }

  .route-record-start .layout > div {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .route-record-start .guest-banner {
    grid-column: 1 / -1;
  }

  .route-record-start .panel {
    padding: 28px;
  }

  .route-record-start .panel .heading-section::before {
    margin-right: 9px;
  }

  .design-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 18px;
  }

  .swatch {
    height: 86px;
    margin-bottom: 12px;
  }

  .token-name {
    font-size: 13px;
  }

  .ds-section {
    margin-bottom: 35px;
  }

  .ds-section .heading-section {
    padding-bottom: 12px;
  }

  .type-display {
    line-height: 1.6;
  }

  .ds-spacing {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
  }

  .ds-spacing div {
    width: 55px;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ds-callout {
    padding: 15px 20px;
  }

  .page-inventory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 12px;
  }

  .page-inventory a {
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
  }

  .page-inventory small {
    display: block;
    font-size: 12px;
  }

  .layout:has(> .aside:empty) {
    grid-template-columns: 1fr;
  }

  .screen-links,
  .home-grid {
    min-width: 0px;
  }

  .event-cover {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .event-cover strong::before {
    margin-right: 8px;
  }

  .route-magazine .article-body {
    font-size: 17px;
    line-height: 2.1;
    padding: 32px;
  }

  .route-states #state-preview {
    min-height: 160px;
  }

  .route-contact .layout > div,
  .route-help .layout > div,
  .route-terms .layout > div,
  .route-privacy .layout > div {
    max-width: 790px;
  }

  .route-profile .topline .heading-page {
    font-size: 34px;
  }

  .route-profile .topline .heading-page::before {
    font-weight: 400;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    font-size: 28px;
    margin-right: 15px;
  }

  .route-compose .layout {
    grid-template-columns: minmax(0px, 1fr) 245px;
  }

  .route-compose .aside {
    position: sticky;
    top: 125px;
  }

  .route-screens .panel .heading-section {
    font-size: 18px;
  }

  .route-screens .screen-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .route-home main {
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    padding: 32px 28px 48px;
  }

  .personal-home {
    display: grid;
    grid-template-columns: var(--column-side) minmax(0px, 1fr) var(
        --column-side
      );
    gap: var(--layout-gap);
    align-items: start;
  }

  .personal-home > * {
    min-width: 0px;
  }

  .personal-home .heading-section {
    font-size: 18px;
    margin: 0px;
  }

  .personal-home
    :where(
      .activity-value,
      .article-date,
      .article-summary,
      .comment-body,
      .empty-message,
      .event-venue,
      .form-error,
      .list-description,
      .list-note,
      .navigation-copy,
      .notification-message,
      .policy-body,
      .profile-bio,
      .record-author-name,
      .record-body,
      .record-byline,
      .record-excerpt,
      .record-sensory-note,
      .reference-description,
      .result-count,
      .store-address,
      .submitted-note,
      .ui-description
    ) {
    margin: 0px;
  }
  .home-left {
    position: sticky;
  }

  .home-identity {
    display: flex;
    flex-direction: column;
    padding: 0px 12px 28px;
  }

  .home-avatar {
    display: grid;
  }

  .home-avatar svg {
    width: 26px;
    height: 26px;
  }

  .home-kicker {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 700;
  }

  .home-identity strong {
    display: block;
    font-size: 19px;
    margin: 5px 0px;
  }

  .home-identity .ui-description {
    font-size: 12px;
  }

  .home-local-nav {
    display: grid;
    gap: 6px;
  }

  .home-local-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .home-private-note {
    font-size: 12px;
    line-height: 1.9;
    padding: 18px 12px;
  }

  .home-settings {
    display: inline-block;
    padding: 12px;
    font-size: 13px;
  }

  .home-center {
    display: grid;
    gap: 28px;
  }

  .home-compose {
    border-radius: 22px;
    padding: 28px;
  }

  .home-heading .heading-page {
    margin: 8px 0px;
    line-height: 1.6;
  }

  .home-heading .ui-description {
    font-size: 14px;
  }

  .home-compose-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px;
    text-align: left;
    min-height: 88px;
  }

  .home-action-plus {
    font-weight: 400;
  }

  .home-compose-actions strong {
    display: block;
    font-size: 17px;
  }

  .home-compose-actions small {
    display: block;
    margin-top: 5px;
  }

  .home-compose-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    font-size: 12px;
  }

  .home-compose-foot :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 36px;
    padding: 6px 10px;
  }

  .home-notebook {
    border-radius: 22px;
    padding: 24px;
  }

  .home-notebook > .ui-description {
    font-size: 14px;
    margin: 6px 0px 20px;
  }

  .home-notebook .section-title {
    gap: 8px;
  }

  .home-notebook .home-kicker {
    font-size: 10px;
    white-space: nowrap;
  }

  .home-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0px;
    min-width: 0px;
  }

  .entry-icon {
    display: grid;
    place-items: center;
    height: 44px;
    flex-shrink: 0;
  }

  .home-entry > span:nth-child(2) {
    min-width: 0px;
  }

  .home-entry strong {
    font-size: 15px;
    display: block;
  }

  .home-entry small {
    font-size: 12px;
    display: block;
    line-height: 1.8;
    margin-top: 4px;
  }

  .home-entry:hover strong {
    text-decoration: none;
  }

  .home-entry:hover {
    text-decoration: none;
  }

  .home-discover {
    padding-top: 6px;
  }

  .home-discover .section-title {
    gap: 12px;
    flex-wrap: wrap;
  }

  .home-section-copy {
    font-size: 14px;
    margin: 7px 0px 18px !important;
  }

  .home-discovery-grid {
    display: grid;
  }

  .home-discovery-grid .home-card {
    min-width: 0px;
  }

  .home-discovery-grid .record-cover {
    height: auto;
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
    margin-bottom: 12px;
  }

  .home-discovery-grid .heading-item {
    font-size: 14px;
    margin: 8px 0px;
    overflow-wrap: anywhere;
  }

  .home-discovery-grid .muted {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .home-discovery-grid .tag-button {
    font-size: 12px;
  }

  .home-discovery-grid .row {
    gap: 5px;
  }

  .home-right {
    display: grid;
    gap: 26px;
  }

  .home-side-section .section-title {
    margin-bottom: 14px;
    gap: 10px;
  }

  .home-side-section .heading-section {
    font-size: 16px;
  }

  .home-side-section .section-title a {
    font-size: 12px;
  }

  .home-side-section .home-card {
    padding: 0px;
  }

  .home-side-section .editorial-cover {
    margin-bottom: 0;
    aspect-ratio: 1.65 / 1;
  }

  .home-side-section .heading-item {
    font-size: 14px;
    margin: 6px 0px;
  }

  .home-side-section :is(.article-summary, .event-venue, .empty-message) {
    font-size: 12px;
    margin-top: 4px;
  }

  .home-side-section .event-cover {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    margin-bottom: 10px;
  }

  .event-cover span {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .home-news {
    display: block;
    padding: 12px 0px;
    font-size: 15px;
  }

  .home-news time {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
  }

  .home-preview-options {
    padding-top: 10px;
  }

  .home-preview-options summary {
    font-size: 12px;
  }

  .home-preview-options .wire-controls {
    margin-bottom: 0px;
  }

  .route-home .site-footer {
    max-width: var(--content-width);
  }

  :root {
    --content-width: 1050px;
    --page-gutter: 24px;
    font-synthesis: none;
    font-weight: 400;
    line-height: 1.75;
  }

  body {
    font-weight: 400;
  }

  .heading-page,
  .heading-section,
  .heading-item,
  .heading-minor,
  strong,
  b,
  summary,
  :is(button, :where(a.button)),
  .brand,
  .footer-brand,
  .profile-initial {
    font-weight: 500;
  }

  .heading-page {
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 1.55;
  }

  .heading-section {
    font-size: 20px;
    letter-spacing: 0px;
  }

  .heading-item {
    font-size: 17px;
    letter-spacing: 0px;
  }

  .eyebrow,
  .home-kicker {
    display: none;
  }

  .type-display {
    font-size: 28px;
    font-weight: 500;
  }

  .type-heading {
    font-size: 20px;
    font-weight: 500;
  }

  main,
  .route-home main {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding: 32px var(--page-gutter) 64px;
  }

  .header {
    width: 100%;
    max-width: none;
    min-height: 92px;
    padding: 14px
      max(var(--page-gutter), calc((100% - var(--content-width)) / 2));
    gap: 32px;
    backdrop-filter: none;
    flex-wrap: nowrap;
  }

  .brand,
  .footer-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: 0px;
  }

  .brand img {
    display: block;
    width: 100px;
    height: auto;
  }

  .footer-brand img {
    width: 100px;
    height: auto;
    display: block;
  }

  .brand:hover,
  .footer-brand:hover {
    text-decoration: none;
  }

  .header nav {
    display: flex;
    flex: 1 1 0%;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    line-height: 1.5;
    flex-wrap: wrap;
  }

  .header nav a[href="/"] {
    display: block;
  }

  .header nav a.active {
    font-weight: 500;
  }

  .header nav a.active::after {
    height: 2px;
  }

  .header .nav-create {
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 8px;
  }

  .header .nav-create::after {
    display: none;
  }

  .account-link {
    width: 40px;
    height: 40px;
  }

  .account-link svg {
    width: 20px;
    height: 20px;
  }

  .site-menu {
    position: relative;
    padding: 0px;
    display: none;
  }

  .site-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
  }

  .site-menu summary::-webkit-details-marker {
    display: none;
  }

  .site-menu > div {
    position: absolute;
    right: 0px;
    top: 52px;
    width: 230px;
    border-radius: 12px;
    padding: 8px;
    max-height: 70vh;
    overflow: auto;
    z-index: 30;
  }

  .site-menu a {
    display: block;
    font-size: 14px;
    padding: 11px 14px;
    border-radius: 6px;
  }

  .site-menu a:hover {
    text-decoration: none;
  }

  .site-footer,
  .route-home .site-footer {
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--content-width);
    margin: 0px auto;
    padding: 32px 0px;
  }

  .site-footer .ui-description {
    font-size: 14px;
  }

  .site-footer > div {
    gap: 12px 24px;
    font-size: 14px;
  }

  .site-footer > div a {
    /* min-height: 44px; */
    display: flex;
    align-items: center;
  }

  .site-footer small {
    font-size: 12px;
  }

  .layout {
    grid-template-columns: minmax(0px, 1fr) 260px;
    gap: 40px;
  }

  .layout > div {
    min-width: 0px;
  }

  .aside {
    border-radius: 0px;
    padding: 4px 0px 4px 24px;
  }

  .topline {
    gap: 20px;
  }

  .topline .heading-page {
    margin: 0px;
  }

  .topline > .row {
    flex-wrap: wrap;
  }

  :is(
      .route-compose,
      .route-review,
      .route-detail,
      .route-guest,
      .route-community
    )
    .layout {
    grid-template-columns: minmax(0px, 760px) 240px;
    justify-content: space-between;
  }

  .route-login .layout,
  .route-verify .layout,
  .route-onboarding .layout {
    grid-template-columns: minmax(0px, 480px);
  }

  .route-login .layout > div,
  .route-verify .layout > div,
  .route-onboarding .layout > div {
    border-radius: 12px;
  }

  .route-login .topline,
  .route-verify .topline,
  .route-onboarding .topline {
    max-width: 480px;
  }

  :is(button, :where(a.button)) {
    border-radius: 8px;
    font-weight: 500;
    min-height: 44px;
    padding: 10px 16px;
  }

  :is(button, :where(a.button)).primary {
    font-weight: 500;
  }

  .panel,
  .home-card,
  .record,
  .store,
  .dish,
  .sensory,
  .filters,
  .daily-note,
  .selected-store,
  .screen-links a,
  .page-inventory a {
    border-radius: 12px;
  }

  .panel {
    padding: 24px;
  }

  .record {
    padding: 24px;
  }

  .record .heading-section {
    font-size: 16px;
    font-weight: 500;
  }

  .date strong {
    font-size: 25px;
    font-weight: 500;
  }

  .dish {
    padding: 20px;
  }

  .empty {
    border-radius: 12px;
  }

  .empty .heading-section {
    font-weight: 500;
  }

  .guest-banner {
    border-radius: 8px;
  }

  .guest-actions {
    gap: 12px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    border-radius: 8px;
    font-weight: 400;
  }

  .choices label {
    border-radius: 8px;
    min-height: 44px;
  }

  .tabs :is(button, :where(a.button)) {
    border-radius: 8px;
    font-size: 14px;
    min-height: 44px;
  }

  .tag-button {
    min-height: 36px;
    font-size: 13px;
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 400;
  }

  .tag {
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
  }

  .home-card .tag-button {
    min-height: 36px;
  }

  .record-cover,
  .editorial-cover,
  .article-hero,
  .record-preview,
  .photo img {
    border-radius: 8px;
  }

  .home-card .heading-item {
    font-weight: 500;
  }

  .home-card {
    padding: 16px;
  }

  .screen-links a {
    padding: 18px;
  }

  .steps {
    gap: 16px;
  }

  .steps strong {
    font-weight: 500;
  }

  .actions {
    padding-top: 20px;
  }

  .error:not(:empty) {
    border-radius: 8px;
  }

  .ds-callout {
    border-radius: 8px;
  }

  .swatch {
    border-radius: 8px;
  }

  dialog {
    border-radius: 14px;
    padding: 28px;
  }

  dialog::backdrop {
    backdrop-filter: none;
  }

  dialog .heading-section {
    font-size: 22px;
    font-weight: 500;
  }

  #notice {
    border-radius: 8px;
  }

  .home-compose,
  .home-notebook {
    border-radius: 12px;
  }

  .home-heading .heading-page {
    font-size: 20px;
    letter-spacing: 0px;
    font-weight: 500;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    border-radius: 8px;
  }

  .home-compose-actions strong {
    font-weight: 500;
  }

  .home-compose-actions small {
    font-size: 12px;
  }

  .home-action-plus {
    font-size: 22px;
  }

  .home-avatar {
    border-radius: 0px;
    width: 40px;
    height: 40px;
    place-items: start;
  }

  .home-identity {
    gap: 8px;
  }

  .home-identity strong {
    font-weight: 500;
  }

  .home-local-nav a {
    border-radius: 8px;
  }

  .home-local-nav a[aria-current] {
    font-weight: 500;
  }

  .personal-home .heading-section {
    font-weight: 500;
    letter-spacing: 0px;
  }

  .entry-icon {
    width: 28px;
    border-radius: 0px;
  }

  .home-entry strong {
    font-weight: 500;
  }

  .home-discovery-grid .record-cover {
    border-radius: 8px;
  }

  .home-side-section .editorial-cover {
    border-radius: 8px;
  }

  .home-side-section .event-cover {
    border-radius: 8px;
  }

  .event-cover strong {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0px;
  }

  .home-side-section .event-cover > span {
    display: none;
  }

  .home-left {
    top: 116px;
  }

  .home-preview-options {
    margin-top: 32px;
  }

  .prototype {
    font-size: 12px;
  }

  .prototype > span:first-child {
    font-size: 12px;
    letter-spacing: 0px;
  }

  :root {
    --radius-control: 5px;
    --radius-card: 5px;
  }

  :is(
    :is(button, :where(a.button)),
    .panel,
    .home-card,
    .record,
    .store,
    .dish,
    .sensory,
    .filters,
    .daily-note,
    .selected-store,
    .screen-links a,
    .page-inventory a,
    .empty,
    .guest-banner,
    .ds-callout,
    .swatch,
    .home-compose,
    .home-notebook,
    .tag-button,
    .choices label,
    .tabs :is(button, :where(a.button)),
    .home-local-nav a,
    .site-menu summary,
    .site-menu > div,
    .site-menu a
  ) {
    border-radius: 5px;
  }

  .header .nav-create,
  .home-compose-actions :is(:is(button, :where(a.button)), a),
  .home-discovery-grid .home-card,
  .home-side-section .event-cover,
  .home-side-section .editorial-cover,
  .home-discovery-grid .record-cover,
  .mobile-bottom .create .ui-icon {
    border-radius: 5px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .record-cover,
  .editorial-cover,
  .article-hero,
  .record-preview,
  .photo img,
  dialog,
  .error:not(:empty),
  #notice {
    border-radius: 5px;
  }

  .store-search {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(
        0px,
        1.3fr
      ) auto;
    gap: 16px;
    align-items: end;
  }

  .event-filters {
    padding: 24px;
    border-radius: 5px;
    margin-bottom: 24px;
  }

  .event-area-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .event-filters label {
    margin: 0px;
  }

  .event-filters fieldset {
    padding: 0px;
    margin: 24px 0px;
  }

  .event-filters legend {
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 14px;
  }

  .event-tag-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .event-tag-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 5px;
  }

  .event-dates {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
    align-items: end;
    gap: 14px;
  }

  .event-dates > span {
    padding-bottom: 12px;
  }

  .event-filter-error {
    font-size: 14px;
  }

  .event-filter-error:empty {
    display: none;
  }

  .event-result-count {
    font-size: 14px;
  }

  .event-meta {
    display: grid;
    gap: 8px;
    margin: 12px 0px;
    font-size: 13px;
  }

  .event-meta time {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .event-meta .tag {
    font-size: 12px;
  }

  .event-results .home-card .heading-item {
    font-size: 17px;
  }

  .event-results .event-cover {
    padding: 20px;
    border-radius: 5px;
    min-height: 110px;
    display: grid;
    align-content: center;
  }

  .event-results .event-cover > span {
    display: none;
  }

  .event-results .event-cover strong {
    font-size: 17px;
    font-weight: 500;
  }

  .site-footer .area-data-credit {
    font-size: 11px;
    line-height: 1.8;
  }

  .panel-search.store-search {
    display: grid;
    gap: 12px;
  }

  .panel-search.event-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0px;
  }

  .filter-trigger {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 5px;
    font-weight: 500;
  }

  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
  }

  .filter-chips:empty {
    display: none;
  }

  .filter-chips :is(button, :where(a.button)) {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: 5px;
  }

  .filter-dialog {
    padding: 0px;
    width: min(900px, -48px + 100vw);
    max-width: none;
    max-height: 85dvh;
    border-radius: 5px;
  }

  .filter-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .filter-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    flex-shrink: 0;
  }

  .filter-dialog .heading-section {
    margin: 0px;
    font-size: 20px;
    font-weight: 500;
  }

  .filter-dialog header :is(button, :where(a.button)) {
    font-size: 28px;
    line-height: 1;
    padding: 8px;
  }

  .filter-body {
    padding: 0px 24px;
    overflow: auto;
    min-height: 0px;
  }

  .filter-dialog footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    flex-shrink: 0;
  }

  .filter-dialog footer .primary {
    flex: 1 1 0%;
    max-width: 400px;
  }

  .region-row {
    display: grid;
    grid-template-columns: 155px 1fr;
    gap: 20px;
    padding: 24px 0px;
  }

  .region-row > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
  }

  .region-row label,
  .event-tag-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px;
    font-size: 15px;
    font-weight: 400;
  }

  .region-row input,
  .event-tag-options input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0px;
  }

  .region-heading {
    align-self: start;
    font-weight: 500 !important;
  }

  .store-area-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px 0px;
  }

  .filter-dialog .event-tag-options,
  .filter-dialog .event-dates {
    padding: 28px 0px;
  }

  .filter-dialog .event-dates input {
    max-width: 100%;
  }

  .notification-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .unread-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .notification-item {
    display: flex;
    gap: 16px;
  }

  .notification-message {
    margin: 0px 0px 6px;
  }

  .notification-marker {
    margin-top: 9px;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .route-design-system .type-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px;
  }

  .route-design-system .type-guide-card {
    padding: 22px;
    border-radius: 5px;
    min-width: 0px;
  }

  .route-design-system .type-guide-card .heading-item {
    margin: 0px 0px 16px;
  }

  .route-design-system .type-guide-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0px;
  }

  .route-design-system .type-guide-card dt {
    font-size: 12px;
  }

  .route-design-system .type-guide-card dd {
    margin: 0px;
    font-size: 14px;
  }

  .route-design-system .type-guide-card .ui-description {
    font-size: 14px;
  }

  .route-design-system .type-guide-samples {
    display: grid;
    gap: 16px;
    padding: 18px 0px;
  }

  .route-design-system .type-guide-samples small {
    font-size: 12px;
  }

  .route-design-system .type-guide-specimen {
    overflow-wrap: anywhere;
    margin-top: 6px;
  }

  .route-design-system .type-guide-card details {
    padding: 0px;
  }

  .route-design-system .type-guide-card code {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .route-design-system .type-guide-card summary {
    font-weight: 400;
    font-size: 12px;
  }

  .prototype[hidden] {
    display: none !important;
  }

  .panel-search.store-search {
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(
        230px,
        2fr
      ) auto;
    align-items: center;
    margin-bottom: 24px;
  }

  .store-search > .filter-trigger,
  .store-search > input,
  .store-search > :is(button, :where(a.button))[type="submit"] {
    height: 48px;
    min-height: 48px;
    margin: 0px;
  }

  .store-search > .filter-trigger {
    min-width: 0px;
    overflow: hidden;
  }

  .region-row input[type="radio"],
  .municipality-grid input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0px;
  }

  .region-row .heading-item {
    margin: 0px;
    font-size: 15px;
  }

  .municipality-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 20px;
    padding: 24px 0px;
  }

  .municipality-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    margin: 0px;
  }

  .layout:not(:has(.aside > *)) {
    grid-template-columns: minmax(0px, 1fr);
  }

  .aside:empty {
    display: none;
  }

  .home-banners {
    min-width: 0px;
  }

  .banner-slides {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
  }

  .banner-slide {
    display: block;
    width: 100%;
    height: 100%;
  }

  .banner-slide[hidden] {
    display: none;
  }

  .banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .banner-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    margin-top: 2px;
  }

  .banner-controls :is(button, :where(a.button)) {
    justify-items: center;
    width: 36px;
    font-size: 17px;
  }

  .banner-dots {
    display: flex;
  }

  .banner-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  .banner-controls [data-banner-pause] {
    font-size: 12px;
  }

  .home-left,
  .home-compose,
  .home-notebook,
  .home-discover,
  .home-store-entry,
  .home-side-section {
    border-radius: 5px;
  }

  .home-left {
    padding: 20px 12px;
  }

  .home-identity {
    padding-inline: 8px;
  }

  .home-local-nav {
    padding: 16px 0px;
  }

  .home-private-note {
    padding-inline: 8px;
  }

  .home-compose,
  .home-notebook,
  .home-discover {
    padding: 24px;
  }

  .home-store-entry {
    padding: 4px 24px;
  }

  .home-side-section {
    padding: 20px;
  }

  .home-center,
  .home-right {
    gap: 24px;
  }

  .home-right {
    padding-top: 0px;
  }

  .record,
  .store {
    margin-bottom: 20px;
  }

  .filters {
    padding: 20px;
  }

  .notification-list {
    border-radius: 5px;
    overflow: hidden;
  }

  .notification-item {
    padding: 22px 20px;
  }

  .aside:not(:empty) {
    border-radius: 5px;
    padding: 24px;
    align-self: start;
  }

  :is(
      .route-login,
      .route-verify,
      .route-onboarding,
      .route-settings,
      .route-settings-profile,
      .route-profile-preview,
      .route-contact,
      .route-help,
      .route-terms,
      .route-privacy
    )
    .layout
    > div {
    border-radius: 5px;
    padding: 24px;
  }

  .route-stores .store-search,
  .route-events .event-filters {
    border-radius: 5px;
    padding: 20px;
  }

  .activity-stats {
    display: grid;
    gap: 16px;
    margin: 24px 0px;
  }

  .activity-stats > div {
    padding: 18px;
    border-radius: 5px;
  }

  .activity-stats span {
    font-size: 13px;
  }

  .activity-value {
    margin: 8px 0px 0px;
  }

  .activity-stats strong {
    font-size: 30px;
    font-weight: 500;
  }

  .activity-record {
    padding: 20px 0px;
  }

  .activity-record .heading-item {
    margin: 10px 0px;
  }

  .activity-links {
    display: grid;
    gap: 16px;
  }

  .store-search > .filter-trigger {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mypage-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 5px;
    margin: 0px 0px 24px;
    width: fit-content;
  }

  .mypage-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 14px;
    border-radius: 5px;
  }

  .mypage-tabs a[aria-current="page"] {
    font-weight: 500;
  }

  .mypage-tabs a:hover {
    text-decoration: none;
  }
  .profile-summary {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    border-radius: 5px;
    padding: 28px;
    margin: 0px 0px 20px;
  }

  .profile-avatar {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: 50%;
  }

  .profile-fallback {
    display: grid;
    place-items: center;
  }

  .profile-fallback svg {
    width: 44px;
    height: 44px;
  }

  .profile-copy {
    flex: 1 1 0%;
    min-width: 0px;
  }

  .profile-copy .heading-section {
    font-size: 20px;
    font-weight: 500;
    margin: 0px 0px 8px;
  }

  .profile-copy .profile-bio {
    margin: 0px 0px 12px;
    overflow-wrap: anywhere;
  }

  .profile-links {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
  }

  .profile-actions {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    font-size: 13px;
  }

  .profile-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--color-inset);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
  }

.profile-actions a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .registration-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .route-store-register .layout,
  .route-settings-profile .layout {
    grid-template-columns: minmax(0px, 760px);
    justify-content: center;
  }

  .route-store-register .aside {
    display: none;
  }

  .route-settings-profile form .profile-avatar {
    margin-bottom: 12px;
  }

  .store-registration-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0px;
    font-size: 13px;
  }

  .account-link .profile-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .route-settings-profile .aside:empty {
    display: none;
  }

  .home-compose-actions.unified-entry {
    grid-template-columns: minmax(0px, 1fr);
  }

  .unified-entry :is(:is(button, :where(a.button)), a) {
    width: 100%;
  }

  .route-record-start .layout > div {
    display: block;
  }

  .route-record-start .layout,
  .route-compose .layout {
    grid-template-columns: minmax(0px, 760px);
    justify-content: center;
  }

  .journal-main textarea {
    min-height: 150px;
  }

  .journal-extras > .heading-section {
    margin-bottom: 16px;
  }

  .journal-extras details {
    margin-top: 20px;
    padding-top: 18px;
  }

  .journal-extras summary {
    font-weight: 500;
    padding: 8px 0px;
  }

  .reference-item {
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0px;
  }

  .reference-item .row label {
    margin: 0px;
  }

  .reference-item input {
    min-width: 0px;
  }

  .panel:has(.reference-items) .ui-description,
  .panel:has(a[target="_blank"]) a {
    overflow-wrap: anywhere;
  }

  .activity-stats {
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }

  .home-left .home-local-nav {
    padding-top: 0px;
  }

  .record-excerpt {
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .home-record-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
  }

  .home-record-author .profile-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .home-record-author .profile-fallback svg {
    width: 22px;
    height: 22px;
  }

  .home-record-author > span:last-child {
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .route-public .layout {
    display: block;
  }

  .route-public .layout > .aside {
    display: none;
  }

  .public-record-layout {
    display: grid;
    gap: 28px;
    align-items: start;
  }

  .public-filter-sidebar {
    padding: 20px;
    border-radius: 5px;
    min-width: 0px;
  }

  .public-filter-sidebar .tabs {
    grid-template-columns: 1fr 1fr;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
  }

  .public-filter-sidebar .tag-filter {
    padding: 0px 0px 20px;
    margin: 0px 0px 20px;
  }

  .public-filter-sidebar .tag-filter .heading-section {
    font-size: 15px;
  }

  .public-filter-sidebar .tag-filter .ui-description {
    font-size: 12px;
    line-height: 1.7;
  }

  .public-filter-sidebar .tag-filter .row {
    gap: 8px;
  }

  .public-filter-sidebar .filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0px;
    margin: 0px;
  }

  .public-filter-sidebar input {
    width: 100%;
    min-width: 0px;
  }

  .public-filter-actions {
    display: grid;
    gap: 12px;
    margin-top: 20px;
  }

  .public-record-results {
    min-width: 0px;
  }

  .public-record-results > .line {
    margin-top: 0px;
    padding-top: 0px;
  }

  .record-guide-steps {
    padding-left: 24px;
  }

  .record-guide-steps li {
    padding-left: 4px;
    margin-bottom: 20px;
  }

  .record-guide-steps .heading-item {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .record-guide-steps .ui-description {
    font-size: 14px;
    margin: 0px;
  }

  .public-record-results .public-record {
    display: block;
    min-width: 0px;
  }

  .public-record .home-record-author {
    margin-bottom: 4px;
  }

  .public-record-date {
    font-size: 12px;
    margin: 0px 0px 16px 50px;
  }

  .public-record > .heading-section {
    margin: 12px 0px;
  }

  .public-record > .tag {
    display: inline-block;
  }

  .public-record .record-tags {
    margin: 16px 0px;
  }

  .home-discovery-grid {
    grid-template-columns: minmax(0px, 1fr);
    gap: 0px;
  }

  .home-discovery-grid .home-card {
    padding: 24px 0px;
    border-radius: 0px;
  }

  .home-discovery-grid .home-card:first-child {
    padding-top: 0px;
  }

  .home-discovery-grid .home-card:last-child {
    padding-bottom: 0px;
  }

  .home-post-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0px;
  }

  .home-post-images a {
    display: block;
    max-width: 100%;
    border-radius: 5px;
  }

  .home-post-images img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
  }

  .home-post-images .home-post-more {
    font-size: 12px;
    padding: 10px;
  }

  .record-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .record-preview-header .home-record-author {
    flex: 1 1 0%;
    min-width: 0px;
    margin: 0px;
  }

  .record-preview-header .home-record-author > span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .record-preview-date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
  }

  .record-preview-kind {
    font-weight: 400;
  }

  .public-filter-sidebar .tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button)) {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 0px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 400;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"] {
    font-weight: 500;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 3px;
    height: 2px;
  }

  .profile-links {
    gap: 4px;
  }

  .profile-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border-radius: 5px;
  }

  .profile-links a svg {
    width: 22px;
    height: 22px;
  }

  :root {
    --control-height: 48px;
    --compact-control-height: 36px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="file"]
    ),
  select {
    height: var(--control-height);
    min-height: var(--control-height);
    padding-block: 10px;
    min-width: 0px;
  }

  :is(button, :where(a.button)) {
    vertical-align: middle;
  }

  :is(button, :where(a.button)) svg,
  .ui-icon {
    vertical-align: middle;
    flex-shrink: 0;
  }

  .panel-search.store-search
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    margin: 0px;
  }

  .panel-search.event-filters > .filter-trigger,
  .panel-search.event-filters > :is(button, :where(a.button)) {
    min-height: var(--control-height);
    margin: 0px;
  }

  .row:has(> label input:not([type="checkbox"]):not([type="radio"])),
  .row:has(> label select) {
    align-items: flex-end;
  }

  .row > label:has(input:not([type="checkbox"]):not([type="radio"])),
  .row > label:has(select) {
    margin-bottom: 0px;
    min-width: 0px;
  }

  .row:has(> label input:not([type="checkbox"]):not([type="radio"])) > :is(button, :where(a.button)),
  .row:has(> label select) > :is(button, :where(a.button)) {
    min-height: var(--control-height);
    margin-block: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  [data-activity-period] {
    gap: 10px;
    align-items: flex-end;
  }

  [data-activity-period] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    line-height: 1.5;
    margin: 0px;
    font-size: 14px;
  }

  .banner-controls,
  .banner-dots {
    display: flex;
    align-items: center;
  }

  .banner-controls :is(button, :where(a.button)) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    margin: 0px;
    padding: 0px;
    line-height: 1;
    flex-shrink: 0;
  }

  .banner-controls svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .banner-dots span {
    display: block;
    flex: 0 0 auto;
  }

  .banner-dots :is(button, :where(a.button)) {
    width: 25px;
  }

  .choices label input,
  .region-row label input,
  .municipality-grid label input,
  .event-tag-options label input {
    margin: 0px;
    vertical-align: middle;
  }

  .photo select {
    height: var(--compact-control-height);
    min-height: var(--compact-control-height);
  }

  .activity-period-shortcuts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .activity-period-shortcuts a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.5;
  }

  .route-verify input[name="code"] {
    height: 64px;
    min-height: 64px;
    line-height: 1.2;
    padding-block: 12px;
  }

  .journal-input-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .journal-input-heading > label {
    margin: 0px;
    font-weight: 500;
  }

  .journal-input-heading input.journal-date {
    width: 152px;
    min-width: 0px;
    height: 44px;
    min-height: 44px;
    margin: 0px;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 400;
    flex: 0 0 152px;
  }

  .journal-date::-webkit-calendar-picker-indicator {
    padding: 4px;
  }

  #journal-impression {
    margin-top: 0px;
    margin-bottom: 20px;
    width: 100%;
  }

  .facet-count {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }

  .filter-option > span {
    min-width: 0px;
  }

  .home-account {
    padding: 20px 16px;
  }

  .home-account-top {
    position: relative;
  }

  .home-account-person {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0px;
    padding-top: 4px;
  }

  .home-account-person .profile-avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }

  .home-account-person strong {
    font-size: 16px;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .home-account-tools {
    position: absolute;
    top: 0px;
    right: -8px;
    display: flex;
  }

  .home-account-tools a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
  }

  .home-account-tools svg {
    width: 18px;
    height: 18px;
  }

  .home-account-tools a:hover {
    border-radius: 5px;
  }

  .home-account .profile-bio {
    font-size: 12px;
    line-height: 1.7;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .home-account-stats {
    display: grid;
    gap: 0px;
    margin-top: 20px;
    padding-block: 8px;
  }

  .home-account-stats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .home-account-stats span {
    font-size: 12px;
  }

  .home-account-stats strong {
    font-size: 19px;
    font-weight: 500;
    white-space: nowrap;
  }

  .home-account-stats small {
    font-size: 12px;
    font-weight: 400;
    margin-left: 4px;
  }

  .home-account-links {
    display: grid;
    margin-top: 12px;
  }

  .home-account-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 13px;
  }

  .home-account-links svg {
    width: 18px;
    height: 18px;
  }

  .home-account-links a > span {
    margin-left: auto;
  }
  .journal-kind-tabs {
    display: flex;
    gap: 28px;
    margin: 0px 0px 24px;
  }

  .journal-kind-tabs :is(button, :where(a.button)) {
    position: relative;
    border-radius: 0px;
    min-height: 48px;
    padding: 8px 4px;
    font-weight: 400;
  }

  .journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"] {
    font-weight: 500;
  }

  .journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
    position: absolute;
    bottom: -1px;
    left: 0px;
    right: 0px;
    height: 2px;
  }

  .journal-place .heading-section {
    font-size: 17px;
  }

  .journal-dishes .dish:first-child {
    margin-top: 0px;
    padding-top: 0px;
  }

  .journal-dishes summary,
  .journal-cooking summary {
    font-weight: 500;
  }

  :is(.route-list, .route-public) main .layout {
    display: block;
  }

  :is(.route-list, .route-public) .layout > .aside {
    display: none;
  }

  .public-record-layout {
    grid-template-columns: 240px minmax(0px, 720px);
    justify-content: center;
  }

  .record-filter-panel {
    margin: 0px;
  }

  .record-filter-panel > summary {
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    align-content: center;
  }

  .compact-record {
    display: block;
    width: 100%;
    max-width: 720px;
    min-width: 0px;
    margin-inline: auto;
  }

  .record-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 12px;
  }

  .record-meta-row .record-date {
    margin-right: auto;
  }

  .compact-record .record-excerpt {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .compact-record .home-post-images {
    margin-block: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .compact-record .home-post-images img {
    width: 140px;
    height: 105px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
  }

  :is(.route-bookmarks, .route-profile, .route-cooking-history)
    .layout
    > .aside {
    display: none;
  }

  :is(.route-store-lists, .route-lists, .route-list-new, .route-list-edit)
    .aside {
    display: none;
  }
  .store-list-card .heading-section,
  .list-places .heading-section {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .store-list-card .list-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .list-create-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 5px;
    font-size: 14px;
  }

  .list-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0px;
  }

  .list-search-result > span {
    min-width: 0px;
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .list-search-result small {
    display: block;
    font-size: 12px;
  }

  .list-search-result :is(button, :where(a.button)) {
    flex-shrink: 0;
  }

  #list-store-results {
    max-height: 320px;
    overflow: auto;
    margin: 12px 0px;
  }

  .list-places {
    margin-block: 24px;
  }

  .profile-store-lists {
    margin-bottom: 28px;
  }

  [data-list-editor] section > .heading-section {
    font-size: 18px;
    margin-bottom: 16px;
  }

  [data-list-editor] .panel strong {
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  [data-list-editor] .row.between {
    flex-wrap: wrap;
  }
  :root {
    --column-reading: 720px;
    --column-side: 240px;
    --layout-gap: 24px;
  }
  body[data-page-layout] {
    --page-content-width: var(--content-width);
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    .panel:not(.panel .panel) {
    width: 100%;
    max-width: none;
    padding-inline: max(
      var(--page-gutter),
      calc((100% - var(--column-reading)) / 2)
    );
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    > div {
    width: 100%;
    max-width: none;
    padding-inline: max(
      var(--page-gutter),
      calc((100% - var(--column-reading)) / 2)
    );
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    > div:has(.panel) {
    padding: 0;
  }
  body[data-page-layout] main {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
  }
  body[data-page-layout] main > * {
    max-width: var(--page-content-width);
    margin-inline: auto;
  }
  body[data-page-layout] main > .topline {
    width: 100%;
    max-width: var(--page-content-width);
    margin-inline: auto;
  }
  body[data-page-layout] main > .layout {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    gap: var(--layout-gap);
    width: 100%;
    max-width: var(--page-content-width);
    margin-inline: auto;
    justify-content: start;
  }

  body[data-page-layout="collection"] main > .layout:has(> .aside > *) {
    grid-template-columns: minmax(0, 1fr) var(--column-side);
  }

  body[data-page-layout="collection"]:is(.route-list, .route-public)
    main
    > .layout {
    display: block;
  }

  body[data-page-layout="collection"]:is(
      .route-mypage,
      .route-bookmarks,
      .route-store-lists,
      .route-profile,
      .route-cooking-history
    )
    main
    > .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-layout="focused"] main > .layout > .aside,
  body[data-page-layout="auth"] main > .layout > .aside {
    padding: 24px;
  }

  body[data-page-layout] .public-record-layout {
    grid-template-columns: var(--column-side) minmax(0, 1fr);
    gap: var(--layout-gap);
    justify-content: start;
  }

  body[data-page-layout] .activity-record {
    max-width: none;
    margin-inline: 0px;
    overflow-wrap: anywhere;
  }

  body[data-page-layout] .compact-record {
    max-width: 100%;
    margin-inline: 0px;
  }

  body[data-page-layout] main > .profile-summary {
    width: 100%;
    margin-inline: auto;
  }

  body[data-page-layout] .public-filter-sidebar .tabs {
    gap: 10px;
  }

  body[data-page-layout] .public-filter-sidebar .tabs :is(button, :where(a.button)) {
    font-size: 13px;
  }

  body[data-page-layout] .section-title {
    gap: 16px;
    flex-wrap: wrap;
  }
  .profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0px;
  }

  .profile-name-row .heading-section {
    margin: 0px;
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .profile-public-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 5px;
  }

  .profile-public-link svg {
    width: 18px;
    height: 18px;
  }

  body[data-page-layout] main > .layout + .panel {
    margin-top: 24px;
  }

  body {
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt", "trad";
  }

  body[data-page-layout="personal"] main > .mypage-tabs {
    width: 100%;
  }

  body[data-page-layout="personal"] .mypage-tabs a {
    flex: 1 1 0%;
    text-align: center;
    min-width: 0px;
  }

  body[data-page-layout="personal"] .public-record-layout {
    grid-template-columns: minmax(0px, 1fr);
  }
  a.text-link {
    font-weight: 600;
  }
  a.text-link:hover {
    text-decoration: none;
  }
  .magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px var(--layout-gap);
  }
  .magazine-card {
    min-width: 0;
  }
  .magazine-card > a {
    display: block;
  }
  .magazine-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 5px;
  }
  .magazine-card .heading-section {
    margin: 16px 0 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .magazine-published {
    margin: 0;
    font-size: 14px;
  }
  .header-actions {
    --header-action-gap: 12px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--header-action-gap);
  }
  .header-actions .nav-create {
    font-size: 14px;
    line-height: 1.5;
    margin-left: 0;
    white-space: nowrap;
  }
  .date-filter-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 10px;
    border-radius: 5px;
  }
  .date-filter-label {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }
  .date-filter-field input.date-filter-input[type="date"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
  }
  .activity-month-field input[type="month"] {
    margin-top: 0;
  }
  .registration-area-field {
    min-width: 0;
    margin-bottom: 18px;
    font-size: 14px;
  }
  .registration-area-field > span {
    display: block;
    margin-bottom: 6px;
  }
  .registration-area-field .filter-trigger {
    width: 100%;
  }
  .registration-area-field .filter-trigger > span:first-child {
    overflow-wrap: anywhere;
  }
  .store-overview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .store-area {
    font-size: 14px;
  }
  .store-primary-actions {
    gap: 12px;
    margin-bottom: 32px;
  }
  .store-primary-actions a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 5px;
  }
  .store-info {
    margin: 0;
  }
  .store-info-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0;
  }
  .store-info-row dt {
    font-weight: 600;
  }
  .store-info-row dd {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .store-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .store-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    max-width: 100%;
    font-weight: 600;
  }
  .store-social-link span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .store-social-link svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .store-extra-fields {
    margin: 24px 0;
  }
  .store-extra-fields summary {
    font-weight: 600;
    margin-bottom: 20px;
  }
  .store-records {
    margin-top: 32px;
  }

  .store-map {
    display: block;
    width: 100%;
    height: 220px;
    margin-top: 16px;
    border-radius: 5px;
  }
  .store-choice-field {
    min-width: 0;
    padding: 0;
    margin: 24px 0 12px;
  }
  .store-choice-field legend {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 0;
  }
  .store-choice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .store-choice-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 44px;
  }
  .store-choice-options input {
    flex: 0 0 auto;
    margin: 0;
    width: 18px;
    height: 18px;
  }
  .store-seat-fields {
    display: grid;
    gap: 16px;
  }
  .store-field {
    min-width: 0;
  }
  [data-store-weekdays][hidden] {
    display: none;
  }
  main details {
    --disclosure-duration: 420;
  }
  .policy-status {
    font-size: 14px;
    margin: 0 0 24px;
  }
  .policy-section + .policy-section {
    margin-top: 32px;
  }
  .policy-body {
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .journal-input-heading {
    flex-wrap: wrap;
  }
  .store-seat-fields {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }
  .route-design-system .layout {
    grid-template-columns: 1fr;
  }

  .route-design-system .aside {
    display: none;
  }

  .record-filter-panel > summary {
    display: none;
  }

  /* 中間幅（761〜1040px）のPC側調整。スマホには波及しない。 */

  @media (width <= 1040px) {
    .home-intro {
      grid-template-columns: 1fr 380px;
      gap: 24px;
    }

    .home-intro .heading-page {
      font-size: 27px;
    }

    .site-footer {
      margin: 0px 24px;
    }

    .home-compose,
    .home-notebook {
      padding: 20px;
    }

    .home-compose-actions {
      gap: 8px;
    }

    .home-compose-actions :is(:is(button, :where(a.button)), a) {
      gap: 6px;
      padding: 14px 10px;
    }

    .home-compose-actions small {
      font-size: 11px;
    }

    .personal-home {
      grid-template-columns: minmax(0px, 1fr) var(--column-side);
      gap: 24px;
    }

    .home-left {
      display: none;
    }

    .home-heading .heading-page {
      font-size: 25px;
    }

    .header {
      gap: 20px;
    }

    .header nav {
      gap: 14px;
      font-size: 13px;
    }

    .layout {
      gap: 28px;
      grid-template-columns: minmax(0px, 1fr) 220px;
    }

    .store-search {
      grid-template-columns: 1fr 1fr;
    }

    .store-search :is(button, :where(a.button)) {
      min-height: 48px;
    }

    .panel-search.store-search {
      grid-template-columns: repeat(2, minmax(0px, 1fr));
    }

    .store-search > input,
    .store-search > :is(button, :where(a.button))[type="submit"] {
      min-width: 0px;
      width: 100%;
    }

    .home-left.home-account {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: static;
      grid-column: 1 / -1;
      padding: 12px 16px;
    }

    .home-account-top {
      min-width: 0px;
      flex: 1 1 0%;
    }

    .home-account-person {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 0px;
    }

    .home-account-person .profile-avatar {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .home-account-person strong {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-account-tools,
    .home-account .profile-bio,
    .home-account-links {
      display: none;
    }

    .home-account-stats {
      display: block;
      margin: 0px;
      padding: 0px;
      border: 0px;
      flex-shrink: 0;
    }

    .home-account-stats a {
      display: none;
    }

    .home-account-stats a.home-month-stat {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      min-height: 44px;
    }

    .home-account-stats strong {
      font-size: 17px;
    }

    body[data-page-layout] .panel-search.store-search {
      grid-template-columns: repeat(2, minmax(0px, 1fr));
    }

    .magazine-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}
/* スマホ専用：760px以下。PCの文字サイズ・余白・配置を変更しても影響しない。 */
@media (width <= 760px) {
  .site-body {
    font-size: 16px;
  }
  :root {
    --font-record-body: 16px;
    --font-record-excerpt: 14px;
    --font-record-date: 12px;
    --font-description: 16px;
  }
  .record-body {
    font-size: var(--font-record-body);
  }
  .record-excerpt {
    font-size: var(--font-record-excerpt);
  }
  .record-excerpt--feed {
    font-size: 13px;
  }
  .record-excerpt.record-excerpt--activity {
    font-size: 16px;
    line-height: 1.85;
  }
  .record-sensory-note {
    font-size: 14px;
  }
  .record-date {
    font-size: var(--font-record-date);
  }
  .comment-body {
    font-size: 16px;
  }
  .profile-bio {
    font-size: 14px;
  }
  .store-address {
    font-size: 13px;
  }
  .article-summary {
    font-size: 16px;
  }
  .article-body {
    font-size: 16px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .article-date {
    font-size: 14px;
  }
  .record-byline {
    font-size: 12px;
  }
  .event-venue {
    font-size: 12px;
  }
  .notification-message {
    font-size: 16px;
  }
  .notification-date {
    font-size: 12px;
  }
  .form-error {
    font-size: 14px;
  }
  .policy-body {
    font-size: 14px;
  }
  .reference-description {
    font-size: 16px;
  }
  .list-description {
    font-size: 16px;
  }
  .list-note {
    font-size: 16px;
  }
  .record-author-name {
    font-size: 16px;
  }
  .activity-value {
    font-size: 16px;
  }
  .result-count {
    font-size: 14px;
  }
  .empty-message {
    font-size: 16px;
  }
  .navigation-copy {
    font-size: 14px;
  }
  .submitted-note {
    font-size: 16px;
  }
  .ui-description {
    font-size: var(--font-description);
  }
  .aside :is(.profile-bio, .navigation-copy, .ui-description) {
    font-size: 14px;
  }

  body {
    margin: 0px;
  }

  :is(button, :where(a.button)),
  input,
  select,
  textarea {
    font: inherit;
  }

  a {
    text-underline-offset: 4px;
  }

  .quiet {
    padding: 6px;
  }

  .prototype {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .header {
    margin: auto;
    display: flex;
    justify-content: space-between;
  }

  .brand {
    text-decoration: none;
  }

  .brand span {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    margin-top: 10px;
  }

  nav {
    display: flex;
  }

  main {
    margin: auto;
  }

  .heading-section {
    margin: 0px 0px 4px;
  }

  .heading-item {
    margin: 0px 0px 12px;
  }

  :where(
    .activity-value,
    .article-date,
    .article-summary,
    .comment-body,
    .empty-message,
    .event-venue,
    .form-error,
    .list-description,
    .list-note,
    .navigation-copy,
    .notification-message,
    .policy-body,
    .profile-bio,
    .record-author-name,
    .record-body,
    .record-byline,
    .record-excerpt,
    .record-sensory-note,
    .reference-description,
    .result-count,
    .store-address,
    .submitted-note,
    .ui-description
  ) {
    margin: 0px 0px 16px;
  }

  .muted {
    font-size: 14px;
  }

  .topline {
    display: flex;
    justify-content: space-between;
  }

  .topline .ui-description {
    margin-bottom: 0px;
  }

  .layout {
    display: grid;
  }

  .aside ol {
    padding-left: 22px;
  }

  .aside li {
    margin-bottom: 14px;
  }

  .filters {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 20px;
  }

  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .between {
    justify-content: space-between;
  }

  label,
  .field {
    display: block;
    font-size: 14px;
    margin-bottom: 18px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    width: 100%;
    margin-top: 6px;
  }

  textarea {
    resize: vertical;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
  }

  input[type="file"] {
    font-size: 14px !important;
  }

  .tabs {
    display: flex;
    margin-bottom: 20px;
  }

  .record {
    display: grid;
  }

  .date strong {
    display: block;
    line-height: 1.4;
  }

  .record .record-excerpt {
    margin: 8px 0px;
  }

  .tag {
    display: inline-block;
  }

  .empty {
    text-align: center;
  }

  .steps {
    display: flex;
  }

  .store {
    margin-bottom: 12px;
  }

  .store .store-address {
    margin: 4px 0px 12px;
  }

  .store .row {
    align-items: flex-start;
  }

  .selected-store {
    margin-bottom: 22px;
  }

  .selected-store .ui-description {
    margin: 4px 0px;
  }

  .section-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .section-title .heading-section {
    margin: 0px;
  }

  .dish .row label {
    flex: 1 1 0%;
  }

  .dish summary,
  details summary {
    padding: 12px 0px;
    font-weight: 600;
  }

  fieldset {
    padding: 0px;
    margin: 0px 0px 18px;
  }

  legend {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .choices {
    display: flex;
    flex-wrap: wrap;
  }

  .choices label {
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .sensory {
    margin-top: 12px;
  }

  .sensory label {
    font-size: 14px;
  }

  .photos {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  .photo {
    width: 145px;
  }

  .photo img {
    width: 145px;
    height: 110px;
    object-fit: cover;
    display: block;
  }

  .photo select {
    padding: 4px;
  }

  .photo :is(button, :where(a.button)) {
    font-size: 12px;
    padding: 3px 6px;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24px;
  }

  .error {
    font-size: 14px;
    white-space: pre-wrap;
  }

  .text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .detail-dish {
    padding: 24px 0px;
  }

  .detail-dish .heading-section {
    margin: 0px 0px 8px;
  }

  .detail-dish:last-child {
    padding-bottom: 0px;
  }

  .guest-banner {
    margin-bottom: 24px;
  }

  dialog {
    max-width: 560px;
    width: calc(100% - 32px);
    max-height: 85vh;
    overflow: auto;
  }

  dialog .heading-section {
    margin-right: 20px;
  }

  dialog ol {
    padding-left: 22px;
  }

  #notice {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    display: none;
  }

  #notice.on {
    display: block;
  }

  .count {
    font-size: 14px;
  }

  .line {
    padding-bottom: 18px;
    margin-bottom: 0;
  }

  .thin {
    font-size: 14px;
  }

  :is(button, :where(a.button)).link {
    padding: 0px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .guest-actions {
    padding-top: 20px;
  }

  .spaced {
    margin-top: 20px;
  }

  .tag-filter {
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 24px;
  }

  .tag-filter .heading-section {
    margin-bottom: 6px;
  }

  .tag-button {
    overflow-wrap: anywhere;
    max-width: 100%;
  }

  .record-tags {
    margin: 12px 0px 18px;
  }

  .record-tags:empty {
    display: none;
  }

  .header nav :is(button, :where(a.button)) {
    font-size: 13px;
    padding: 3px 10px;
  }

  .brand {
    flex-shrink: 0;
  }

  .wire-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .wire-controls label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px;
  }

  .wire-controls select {
    width: auto;
    margin: 0px;
  }

  .home-grid {
    display: grid;
  }

  .home-card {
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .record-cover {
    object-fit: cover;
    display: block;
  }

  .store-search label {
    margin: 0px;
  }

  .store-search :is(button, :where(a.button)) {
    margin-bottom: 0px;
  }

  .news-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }

  .news-list li {
    display: flex;
    padding: 18px 0px;
  }

  .news-list time {
    white-space: nowrap;
  }

  .home-footer {
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 30px;
  }

  .home-footer :is(button, :where(a.button)) {
    font-size: 13px;
    padding: 0px;
    text-decoration: underline;
  }

  .layout .home-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .screen-links {
    display: grid;
  }

  .screen-links a {
    overflow-wrap: anywhere;
  }

  .profile-initial {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 26px;
  }

  :root {
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    font-family: "Noto Sans JP", sans-serif;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  :is(button, :where(a.button)) {
    font-size: 14px;
    line-height: 1.5;
  }

  .prototype {
    line-height: 1.6;
  }

  .prototype a {
    font-size: 12px;
  }

  .prototype :is(button, :where(a.button)) {
    min-height: 28px;
    padding: 2px 7px;
    font-size: 12px;
    margin: 0px;
  }

  .header {
    position: sticky;
    top: 0px;
    z-index: 20;
  }

  .brand {
    letter-spacing: -1.8px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  .brand .brand-dot {
    font: inherit;
    letter-spacing: inherit;
    margin: 0px;
  }

  .header nav {
    max-width: none;
  }

  .header nav a {
    padding: 6px 0px;
  }

  .header nav a.active {
    position: relative;
  }

  .header nav a.active::after {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 4px;
  }

  .account-link {
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 14px;
  }

  .header nav a[href="/"],
  .header nav a[href="/mypage/saved"] {
    display: none;
  }

  main {
    max-width: 1180px;
    min-height: 50vh;
  }

  .heading-page {
    margin: 5px 0px 12px;
    font-weight: 700;
  }

  .heading-section {
    line-height: 1.55;
  }

  .heading-item {
    line-height: 1.7;
  }

  :where(
    .activity-value,
    .article-date,
    .article-summary,
    .comment-body,
    .empty-message,
    .event-venue,
    .form-error,
    .list-description,
    .list-note,
    .navigation-copy,
    .notification-message,
    .policy-body,
    .profile-bio,
    .record-author-name,
    .record-body,
    .record-byline,
    .record-excerpt,
    .record-sensory-note,
    .reference-description,
    .result-count,
    .store-address,
    .submitted-note,
    .ui-description
  ) {
    line-height: 1.85;
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 1.3px;
  }

  .muted,
  .count {
    font-size: 14px;
  }

  .small {
    font-size: 12px;
  }

  .aside {
    align-self: start;
    line-height: 1.9;
  }

  .aside .heading-section {
    font-size: 16px;
  }

  .aside hr {
    margin: 22px 0px;
  }

  .panel > .heading-section {
    margin-bottom: 18px;
  }

  .topline .ui-description {
    font-size: 14px;
  }

  .topline > .row {
    gap: 8px;
  }

  .topline > .row :is(button, :where(a.button)) {
    font-size: 13px;
  }

  .row {
    gap: 10px;
  }

  .filters {
    border-radius: var(--radius-card);
    gap: 16px;
  }

  .filters label {
    margin: 0px;
  }

  .tag-filter {
    padding-bottom: 24px;
  }

  .tag-filter .heading-section {
    font-size: 16px;
  }

  .tag-button,
  .tag {
    border-radius: var(--radius-pill);
    font-size: 12px;
  }

  .tabs {
    gap: 8px;
  }

  .tabs :is(button, :where(a.button)) {
    padding: 9px 20px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 14px;
    line-height: 1.6;
  }

  textarea {
    min-height: 130px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  label,
  .field,
  legend {
    font-size: 14px;
    font-weight: 400;
  }

  label .muted {
    font-size: 12px;
  }

  .record {
    margin-bottom: 18px;
  }

  .record .heading-section {
    margin: 8px 0px;
  }

  .date strong {
    letter-spacing: -1px;
  }

  .record-preview {
    width: 100%;
    object-fit: cover;
    border-radius: 14px;
    margin: 15px 0px;
  }

  .empty {
    padding: 42px 24px;
    font-size: 14px;
    line-height: 1.9;
  }

  .empty .heading-section {
    font-size: 16px;
  }

  .store {
    border-radius: var(--radius-card);
    margin-top:0;
  }

  .store .heading-section {
    font-size: 15px;
  }

  .selected-store {
    border-radius: 12px;
    padding: 18px 22px;
  }

  .selected-store .ui-description {
    font-size: 14px;
  }

  .steps {
    margin: 8px 0px 25px;
  }

  .dish {
    border-radius: 16px;
    margin-top: 20px;
  }

  details {
    padding: 5px 0px;
  }

  details summary {
    font-size: 14px;
    min-height: 48px;
  }

  .sensory {
    border-radius: 16px;
  }

  .sensory fieldset {
    margin-bottom: 25px;
  }

  .choices {
    gap: 8px;
  }

  .photos {
    gap: 16px;
  }

  .photo img {
    border-radius: 12px;
  }

  .photo select,
  .photo :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 34px;
  }

  .error:empty {
    display: none;
  }

  .error:not(:empty) {
    padding: 12px 16px;
    margin: 15px 0px;
  }

  .guest-banner {
    font-size: 13px;
    padding: 15px 18px;
  }

  dialog :is(.ui-description, .empty-message, .navigation-copy),
  dialog li {
    font-size: 14px;
  }

  #notice {
    z-index: 50;
    padding: 13px 22px;
  }

  .wire-controls {
    border-radius: 14px;
    font-size: 12px;
  }

  .wire-controls :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 34px;
  }

  .wire-controls strong {
    font-size: 12px;
  }

  .wire-controls select {
    font-size: 12px;
    min-height: 36px;
    padding: 5px 10px;
  }

  .wire-controls .muted {
    font-size: 12px;
  }

  .home-intro {
    align-items: center;
  }

  .home-intro .heading-page {
    letter-spacing: -1px;
  }

  .daily-note .heading-section {
    margin: 0px 0px 7px;
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .daily-note .ui-description {
    margin: 0px 0px 18px;
  }

  .daily-note .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .home-intro .row :is(button, :where(a.button)),
  .home-intro .row :is(button, :where(a.button)):first-child {
    font-size: 13px;
    min-height: 52px;
    white-space: nowrap;
    padding: 10px;
  }

  .daily-note .note-help {
    margin: 12px 0px;
  }

  .daily-note .note-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .home-grid {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .record-cover {
    width: 100%;
    margin: 0px 0px 15px;
  }

  .editorial-cover {
    aspect-ratio: 1.6 / 1;
    object-fit: cover;
    width: 100%;
  }

  .article-hero {
    width: 100%;
    object-fit: cover;
    margin: 8px 0px 25px;
  }

  .section-title a {
    white-space: nowrap;
  }

  .news-list time {
    font-size: 12px;
  }

  .home-footer {
    display: none;
  }

  .site-footer {
    max-width: 1132px;
  }

  .footer-brand {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -1.6px;
  }

  .site-footer .ui-description {
    margin: 8px 0px 20px;
  }

  .site-footer > div {
    display: flex;
    flex-wrap: wrap;
  }

  .site-footer small {
    display: block;
    margin-top: 24px;
  }

  .screen-links {
    gap: 12px;
  }

  .screen-links a {
    border-radius: 13px;
    min-width: 0px;
  }

  .screen-links :is(button, :where(a.button)) {
    text-align: left;
  }

  .profile-initial {
    font-weight: 700;
  }

  .ui-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .daily-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .daily-shortcuts a {
    border-radius: 14px;
    display: flex;
    align-items: center;
  }

  .route-login .layout,
  .route-verify .layout,
  .route-onboarding .layout {
    justify-content: center;
  }

  .route-login .topline,
  .route-verify .topline,
  .route-onboarding .topline {
    margin: 0px auto 24px;
  }

  .route-login .aside,
  .route-verify .aside,
  .route-onboarding .aside {
    padding: 8px 0px;
  }

  .route-verify input[name="code"] {
    font-size: 28px;
    letter-spacing: 0.3em;
    text-align: center;
  }

  .route-record-start .layout > div {
    gap: 18px;
  }

  .route-record-start .guest-banner {
    grid-column: 1 / -1;
  }

  .route-record-start .panel {
    padding: 28px;
  }

  .route-record-start .panel .heading-section::before {
    margin-right: 9px;
  }

  .design-grid {
    display: grid;
    gap: 18px;
  }

  .swatch {
    height: 86px;
    margin-bottom: 12px;
  }

  .token-name {
    font-size: 13px;
  }

  .ds-section {
    margin-bottom: 35px;
  }

  .ds-section .heading-section {
    padding-bottom: 12px;
  }

  .type-display {
    line-height: 1.6;
  }

  .ds-spacing {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
  }

  .ds-spacing div {
    width: 55px;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ds-callout {
    padding: 15px 20px;
  }

  .page-inventory {
    display: grid;
    gap: 12px;
  }

  .page-inventory a {
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
  }

  .page-inventory small {
    display: block;
    font-size: 12px;
  }

  .layout:has(> .aside:empty) {
    grid-template-columns: 1fr;
  }

  .screen-links,
  .home-grid {
    min-width: 0px;
  }

  .event-cover {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .event-cover strong::before {
    margin-right: 8px;
  }

  .route-magazine .article-body {
    line-height: 2.1;
  }

  .route-states #state-preview {
    min-height: 160px;
  }

  .route-contact .layout > div,
  .route-help .layout > div,
  .route-terms .layout > div,
  .route-privacy .layout > div {
    max-width: 790px;
  }

  .route-profile .topline .heading-page::before {
    font-weight: 400;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .route-compose .aside {
    top: 125px;
  }

  .route-screens .panel .heading-section {
    font-size: 18px;
  }

  .route-screens .screen-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .route-home main {
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
  }

  .personal-home {
    display: grid;
    align-items: start;
  }

  .personal-home > * {
    min-width: 0px;
  }

  .personal-home .heading-section {
    margin: 0px;
  }

  .personal-home
    :where(
      .activity-value,
      .article-date,
      .article-summary,
      .comment-body,
      .empty-message,
      .event-venue,
      .form-error,
      .list-description,
      .list-note,
      .navigation-copy,
      .notification-message,
      .policy-body,
      .profile-bio,
      .record-author-name,
      .record-body,
      .record-byline,
      .record-excerpt,
      .record-sensory-note,
      .reference-description,
      .result-count,
      .store-address,
      .submitted-note,
      .ui-description
    ) {
    margin: 0px;
  }
  .home-left {
    position: sticky;
  }

  .home-identity {
    display: flex;
    flex-direction: column;
    padding: 0px 12px 28px;
  }

  .home-avatar {
    display: grid;
  }

  .home-avatar svg {
    width: 26px;
    height: 26px;
  }

  .home-kicker {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    font-weight: 700;
  }

  .home-identity strong {
    display: block;
    font-size: 19px;
    margin: 5px 0px;
  }

  .home-identity .ui-description {
    font-size: 12px;
  }

  .home-local-nav {
    display: grid;
    gap: 6px;
  }

  .home-local-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .home-private-note {
    font-size: 12px;
    line-height: 1.9;
    padding: 18px 12px;
  }

  .home-settings {
    display: inline-block;
    padding: 12px;
    font-size: 13px;
  }

  .home-center {
    display: grid;
  }

  .home-heading .heading-page {
    margin: 8px 0px;
    line-height: 1.6;
  }

  .home-compose-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    display: flex;
    align-items: center;
    text-align: left;
  }

  .home-action-plus {
    font-weight: 400;
  }

  .home-compose-actions strong {
    display: block;
  }

  .home-compose-actions small {
    display: block;
    margin-top: 5px;
  }

  .home-compose-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
  }

  .home-compose-foot :is(button, :where(a.button)) {
    font-size: 12px;
    min-height: 36px;
    padding: 6px 10px;
  }

  .home-notebook > .ui-description {
    margin: 6px 0px 20px;
  }

  .home-notebook .section-title {
    gap: 8px;
  }

  .home-notebook .home-kicker {
    font-size: 10px;
    white-space: nowrap;
  }

  .home-entry {
    display: flex;
    align-items: center;
    min-width: 0px;
  }

  .entry-icon {
    display: grid;
    place-items: center;
    height: 44px;
    flex-shrink: 0;
  }

  .home-entry > span:nth-child(2) {
    min-width: 0px;
  }

  .home-entry strong {
    display: block;
  }

  .home-entry small {
    display: block;
    line-height: 1.8;
    margin-top: 4px;
  }

  .home-entry:hover strong {
    text-decoration: none;
  }

  .home-entry:hover {
    text-decoration: none;
  }

  .home-discover {
    padding-top: 6px;
  }

  .home-discover .section-title {
    gap: 12px;
    flex-wrap: wrap;
  }

  .home-section-copy {
    margin: 7px 0px 18px !important;
  }

  .home-discovery-grid {
    display: grid;
  }

  .home-discovery-grid .home-card {
    min-width: 0px;
  }

  .home-discovery-grid .record-cover {
    height: auto;
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
    margin-bottom: 12px;
  }

  .home-discovery-grid .heading-item {
    margin: 8px 0px;
    overflow-wrap: anywhere;
  }

  .home-discovery-grid .muted {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .home-discovery-grid .tag-button {
    font-size: 12px;
  }

  .home-discovery-grid .row {
    gap: 5px;
  }

  .home-right {
    display: grid;
  }

  .home-side-section .section-title {
    margin-bottom: 14px;
    gap: 10px;
  }

  .home-side-section .heading-section {
    font-size: 16px;
  }

  .home-side-section .section-title a {
    font-size: 12px;
  }

  .home-side-section .home-card {
    padding: 0px;
  }

  .home-side-section .editorial-cover {
    margin-bottom: 0;
    aspect-ratio: 1.65 / 1;
  }

  .home-side-section .heading-item {
    font-size: 14px;
    margin: 6px 0px;
  }

  .home-side-section :is(.article-summary, .event-venue, .empty-message) {
    font-size: 12px;
    margin-top: 4px;
  }

  .home-side-section .event-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
  }

  .event-cover span {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .home-news {
    display: block;
    padding: 12px 0px;
  }

  .home-news time {
    display: block;
    font-size: 11px;
    margin-bottom: 5px;
  }

  .home-preview-options {
    padding-top: 10px;
  }

  .home-preview-options summary {
    font-size: 12px;
  }

  .home-preview-options .wire-controls {
    margin-bottom: 0px;
  }

  .route-home .site-footer {
    max-width: var(--content-width);
  }

  :root {
    --content-width: 1050px;
    font-synthesis: none;
    font-weight: 400;
    line-height: 1.75;
  }

  body {
    font-weight: 400;
  }

  .heading-page,
  .heading-section,
  .heading-item,
  .heading-minor,
  strong,
  b,
  summary,
  :is(button, :where(a.button)),
  .brand,
  .footer-brand,
  .profile-initial {
    font-weight: 500;
  }

  .heading-page {
    line-height: 1.55;
  }

  .heading-section {
    letter-spacing: 0px;
  }

  .heading-item {
    letter-spacing: 0px;
  }

  .eyebrow,
  .home-kicker {
    display: none;
  }

  .type-display {
    font-weight: 500;
  }

  .type-heading {
    font-size: 20px;
    font-weight: 500;
  }

  main,
  .route-home main {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
  }

  .header {
    width: 100%;
    max-width: none;
    backdrop-filter: none;
    flex-wrap: nowrap;
  }

  .brand,
  .footer-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: 0px;
  }

  .brand img {
    display: block;
    height: auto;
  }

  .footer-brand img {
    width: 75px;
    height: auto;
    display: block;
  }

  .brand:hover,
  .footer-brand:hover {
    text-decoration: none;
  }

  .header nav {
    flex: 1 1 0%;
    align-items: center;
    line-height: 1.5;
    flex-wrap: wrap;
  }

  .header nav a[href="/"] {
    display: block;
  }

  .header nav a.active {
    font-weight: 500;
  }

  .header nav a.active::after {
    height: 2px;
  }

  .header .nav-create {
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 8px;
  }

  .header .nav-create::after {
    display: none;
  }

  .account-link svg {
    width: 20px;
    height: 20px;
  }

  .site-menu {
    position: relative;
    padding: 0px;
  }

  .site-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
  }

  .site-menu summary::-webkit-details-marker {
    display: none;
  }

  .site-menu > div {
    position: absolute;
    right: 0px;
    top: 52px;
    width: 230px;
    border-radius: 12px;
    padding: 8px;
    max-height: 70vh;
    overflow: auto;
    z-index: 30;
  }

  .site-menu a {
    display: block;
    font-size: 14px;
    padding: 11px 14px;
    border-radius: 6px;
  }

  .site-menu a:hover {
    text-decoration: none;
  }

  .site-footer,
  .route-home .site-footer {
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--content-width);
    margin: 0px auto;
  }

  .site-footer .ui-description {
    font-size: 14px;
  }

  .site-footer > div a {
    min-height: 30px;
    display: flex;
    align-items: center;
  }

  .layout > div {
    min-width: 0px;
  }

  .aside {
    border-radius: 0px;
  }

  .topline .heading-page {
    margin: 0px;
  }

  .topline > .row {
    flex-wrap: wrap;
  }

  :is(
      .route-compose,
      .route-review,
      .route-detail,
      .route-guest,
      .route-community
    )
    .layout {
    grid-template-columns: minmax(0px, 760px) 240px;
    justify-content: space-between;
  }

  .route-login .layout,
  .route-verify .layout,
  .route-onboarding .layout {
    grid-template-columns: minmax(0px, 480px);
  }

  .route-login .topline,
  .route-verify .topline,
  .route-onboarding .topline {
    max-width: 480px;
  }

  :is(button, :where(a.button)) {
    border-radius: 8px;
    font-weight: 500;
    min-height: 44px;
    padding: 0 16px;
  }

  :is(button, :where(a.button)).primary {
    font-weight: 500;
  }

  .panel,
  .home-card,
  .record,
  .store,
  .dish,
  .sensory,
  .filters,
  .daily-note,
  .selected-store,
  .screen-links a,
  .page-inventory a {
    border-radius: 12px;
  }

  .record .heading-section {
    font-weight: 500;
  }

  .date strong {
    font-weight: 500;
  }

  .empty {
    border-radius: 12px;
  }

  .empty .heading-section {
    font-weight: 500;
  }

  .guest-banner {
    border-radius: 8px;
  }

  .guest-actions {
    gap: 12px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    border-radius: 8px;
    font-weight: 400;
  }

  .choices label {
    border-radius: 8px;
  }

  .tabs :is(button, :where(a.button)) {
    border-radius: 8px;
    font-size: 14px;
    min-height: 44px;
  }

  .tag-button {
    min-height: 36px;
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 400;
  }

  .tag {
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
  }

  .home-card .tag-button {
    min-height: 36px;
  }

  .record-cover,
  .editorial-cover,
  .article-hero,
  .record-preview,
  .photo img {
    border-radius: 8px;
  }

  .home-card .heading-item {
    font-weight: 500;
  }

  .screen-links a {
    padding: 18px;
  }

  .steps {
    gap: 16px;
  }

  .steps strong {
    font-weight: 500;
  }

  .actions {
    padding-top: 20px;
  }

  .error:not(:empty) {
    border-radius: 8px;
  }

  .ds-callout {
    border-radius: 8px;
  }

  .swatch {
    border-radius: 8px;
  }

  dialog::backdrop {
    backdrop-filter: none;
  }

  dialog .heading-section {
    font-size: 22px;
    font-weight: 500;
  }

  #notice {
    border-radius: 8px;
  }

  .home-compose,
  .home-notebook {
    border-radius: 12px;
  }

  .home-heading .heading-page {
    font-weight: 500;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    border-radius: 8px;
  }

  .home-compose-actions strong {
    font-weight: 500;
  }

  .home-action-plus {
    font-size: 22px;
  }

  .home-avatar {
    border-radius: 0px;
    width: 40px;
    height: 40px;
    place-items: start;
  }

  .home-identity {
    gap: 8px;
  }

  .home-identity strong {
    font-weight: 500;
  }

  .home-local-nav a {
    border-radius: 8px;
  }

  .home-local-nav a[aria-current] {
    font-weight: 500;
  }

  .personal-home .heading-section {
    font-weight: 500;
    letter-spacing: 0px;
  }

  .entry-icon {
    width: 28px;
    border-radius: 0px;
  }

  .home-discovery-grid .record-cover {
    border-radius: 8px;
  }

  .home-side-section .editorial-cover {
    border-radius: 8px;
  }

  .home-side-section .event-cover {
    border-radius: 8px;
  }

  .event-cover strong {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0px;
  }

  .home-side-section .event-cover > span {
    display: none;
  }

  .home-left {
    top: 116px;
  }

  .home-preview-options {
    margin-top: 32px;
  }

  .prototype {
    font-size: 12px;
  }

  .prototype > span:first-child {
    letter-spacing: 0px;
  }

  :root {
    --radius-control: 5px;
    --radius-card: 5px;
  }

  :is(
    :is(button, :where(a.button)),
    .panel,
    .home-card,
    .record,
    .store,
    .dish,
    .sensory,
    .filters,
    .daily-note,
    .selected-store,
    .screen-links a,
    .page-inventory a,
    .empty,
    .guest-banner,
    .ds-callout,
    .swatch,
    .home-compose,
    .home-notebook,
    .tag-button,
    .choices label,
    .tabs :is(button, :where(a.button)),
    .home-local-nav a,
    .site-menu summary,
    .site-menu > div,
    .site-menu a
  ) {
    border-radius: 5px;
  }

  .header .nav-create,
  .home-compose-actions :is(:is(button, :where(a.button)), a),
  .home-discovery-grid .home-card,
  .home-side-section .event-cover,
  .home-side-section .editorial-cover,
  .home-discovery-grid .record-cover,
  .mobile-bottom .create .ui-icon {
    border-radius: 5px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .record-cover,
  .editorial-cover,
  .article-hero,
  .record-preview,
  .photo img,
  dialog,
  .error:not(:empty),
  #notice {
    border-radius: 5px;
  }

  .store-search {
    display: grid;
    gap: 16px;
    align-items: end;
  }

  .event-filters {
    border-radius: 5px;
    margin-bottom: 24px;
  }

  .event-area-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .event-filters label {
    margin: 0px;
  }

  .event-filters fieldset {
    padding: 0px;
    margin: 24px 0px;
  }

  .event-filters legend {
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 14px;
  }

  .event-tag-options {
    gap: 10px;
    flex-wrap: wrap;
  }

  .event-tag-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 5px;
  }

  .event-dates {
    display: grid;
    align-items: end;
    gap: 14px;
  }

  .event-dates > span {
    padding-bottom: 12px;
  }

  .event-filter-error {
    font-size: 14px;
  }

  .event-filter-error:empty {
    display: none;
  }

  .event-result-count {
    font-size: 14px;
  }

  .event-meta {
    display: grid;
    gap: 8px;
    margin: 12px 0px;
    font-size: 13px;
  }

  .event-meta time {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .event-meta .tag {
    font-size: 12px;
  }

  .event-results .home-card .heading-item {
    font-size: 17px;
  }

  .event-results .event-cover {
    padding: 20px;
    border-radius: 5px;
    min-height: 110px;
    display: grid;
    align-content: center;
  }

  .event-results .event-cover > span {
    display: none;
  }

  .event-results .event-cover strong {
    font-size: 17px;
    font-weight: 500;
  }

  .site-footer .area-data-credit {
    font-size: 11px;
    line-height: 1.8;
  }

  .panel-search.store-search {
    display: grid;
  }

  .panel-search.event-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 0px;
  }

  .filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    border-radius: 5px;
    font-weight: 500;
  }

  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    width: 100%;
  }

  .filter-chips:empty {
    display: none;
  }

  .filter-chips :is(button, :where(a.button)) {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
    border-radius: 5px;
  }

  .filter-dialog {
    padding: 0px;
  }

  .filter-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .filter-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .filter-dialog .heading-section {
    margin: 0px;
    font-size: 20px;
    font-weight: 500;
  }

  .filter-dialog header :is(button, :where(a.button)) {
    font-size: 28px;
    line-height: 1;
    padding: 8px;
  }

  .filter-body {
    overflow: auto;
    min-height: 0px;
  }

  .filter-dialog footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
  }

  .filter-dialog footer .primary {
    flex: 1 1 0%;
    max-width: 400px;
  }

  .region-row {
    display: grid;
  }

  .region-row > div {
    display: grid;
    gap: 18px 12px;
  }

  .region-row label,
  .event-tag-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px;
    font-size: 15px;
    font-weight: 400;
  }

  .region-row input,
  .event-tag-options input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0px;
  }

  .region-heading {
    align-self: start;
    font-weight: 500 !important;
  }

  .store-area-selects {
    display: grid;
    gap: 20px;
    padding: 28px 0px;
  }

  .filter-dialog .event-tag-options,
  .filter-dialog .event-dates {
    padding: 28px 0px;
  }

  .filter-dialog .event-dates input {
    max-width: 100%;
  }

  .notification-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    flex-shrink: 0;
  }

  .unread-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  .notification-item {
    display: flex;
    gap: 16px;
  }

  .notification-message {
    margin: 0px 0px 6px;
  }

  .notification-marker {
    margin-top: 9px;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .route-design-system .type-guide-grid {
    display: grid;
    gap: 20px;
  }

  .route-design-system .type-guide-card {
    border-radius: 5px;
    min-width: 0px;
  }

  .route-design-system .type-guide-card .heading-item {
    margin: 0px 0px 16px;
  }

  .route-design-system .type-guide-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0px;
  }

  .route-design-system .type-guide-card dt {
    font-size: 12px;
  }

  .route-design-system .type-guide-card dd {
    margin: 0px;
    font-size: 14px;
  }

  .route-design-system .type-guide-card .ui-description {
    font-size: 14px;
  }

  .route-design-system .type-guide-samples {
    display: grid;
    gap: 16px;
    padding: 18px 0px;
  }

  .route-design-system .type-guide-samples small {
    font-size: 12px;
  }

  .route-design-system .type-guide-specimen {
    overflow-wrap: anywhere;
    margin-top: 6px;
  }

  .route-design-system .type-guide-card details {
    padding: 0px;
  }

  .route-design-system .type-guide-card code {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .route-design-system .type-guide-card summary {
    font-weight: 400;
    font-size: 12px;
  }

  .prototype[hidden] {
    display: none !important;
  }

  .panel-search.store-search {
    align-items: center;
    margin-bottom:0;
  }

  .store-search > .filter-trigger,
  .store-search > input,
  .store-search > :is(button, :where(a.button))[type="submit"] {
    height: 48px;
    min-height: 48px;
    margin: 0px;
  }

  .store-search > .filter-trigger {
    min-width: 0px;
    overflow: hidden;
  }

  .region-row input[type="radio"],
  .municipality-grid input {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0px;
  }

  .region-row .heading-item {
    margin: 0px;
    font-size: 15px;
  }

  .municipality-grid {
    display: grid;
    gap: 20px;
    padding: 24px 0px;
  }

  .municipality-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    margin: 0px;
  }

  .layout:not(:has(.aside > *)) {
    grid-template-columns: minmax(0px, 1fr);
  }

  .aside:empty {
    display: none;
  }

  .home-banners {
    min-width: 0px;
  }

  .banner-slides {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
  }

  .banner-slide {
    display: block;
    width: 100%;
    height: 100%;
  }

  .banner-slide[hidden] {
    display: none;
  }

  .banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .banner-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    margin-top: 2px;
  }

  .banner-controls :is(button, :where(a.button)) {
    justify-items: center;
    width: 36px;
    font-size: 17px;
  }

  .banner-dots {
    display: flex;
  }

  .banner-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  .banner-controls [data-banner-pause] {
    font-size: 12px;
  }

  .home-left,
  .home-compose,
  .home-notebook,
  .home-discover,
  .home-store-entry,
  .home-side-section {
    border-radius: 5px;
  }

  .home-left {
    padding: 20px 12px;
  }

  .home-identity {
    padding-inline: 8px;
  }

  .home-local-nav {
    padding: 16px 0px;
  }

  .home-private-note {
    padding-inline: 8px;
  }

  .record,
  .store {
    margin-bottom:0;
  }

  .notification-list {
    border-radius: 5px;
    overflow: hidden;
  }

  .notification-item {
    padding: 22px 20px;
  }

  .aside:not(:empty) {
    border-radius: 5px;
    align-self: start;
  }

  :is(
      .route-login,
      .route-verify,
      .route-onboarding,
      .route-settings,
      .route-settings-profile,
      .route-profile-preview,
      .route-contact,
      .route-help,
      .route-terms,
      .route-privacy
    )
    .layout
    > div {
    border-radius: 5px;
    padding: 24px;
  }

  .route-stores .store-search,
  .route-events .event-filters {
    border-radius: 5px;
  }

  .activity-stats {
    display: grid;
    margin: 24px 0px;
  }

  .activity-stats > div {
    border-radius: 5px;
  }

  .activity-value {
    margin: 8px 0px 0px;
  }

  .activity-stats strong {
    font-weight: 500;
  }

  .activity-record {
    padding: 20px 0px;
  }

  .activity-record .heading-item {
    margin: 10px 0px;
  }

  .activity-links {
    display: grid;
    gap: 16px;
  }

  .store-search > .filter-trigger {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mypage-tabs {
    display: flex;
    /* padding: 6px; */
    border-radius: 5px;
    margin: 0px 0px 0;
  }

  .mypage-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 5px;
  }

  .mypage-tabs a[aria-current="page"] {
    font-weight: 500;
  }

  .mypage-tabs a:hover {
    text-decoration: none;
  }
  .profile-summary {
    display: flex;
    align-items:center;
    border-radius: 5px;
    margin: 0px 0px 0;
    padding-top:0 !important;
  }

  .profile-avatar {
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: 50%;
  }

  .profile-fallback {
    display: grid;
    place-items: center;
  }

  .profile-fallback svg {
    width: 44px;
    height: 44px;
  }

  .profile-copy {
    flex: 1 1 0%;
    min-width: 0px;
  }

  .profile-copy .heading-section {
    font-weight: 500;
    margin: 0px 0px 8px;
  }

  .profile-copy .profile-bio {
    margin: 0px 0px 12px;
    overflow-wrap: anywhere;
  }

  .profile-links {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
  }

  .profile-actions {
    display: flex;
    flex-direction: column;
    font-size: 13px;
  }

  .profile-actions a {
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .registration-area {
    display: grid;
    gap: 16px;
  }

  .route-store-register .layout,
  .route-settings-profile .layout {
    grid-template-columns: minmax(0px, 760px);
    justify-content: center;
  }

  .route-store-register .aside {
    display: none;
  }

  .route-settings-profile form .profile-avatar {
    margin-bottom: 12px;
  }

  .store-registration-entry {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0px;
    font-size: 13px;
  }

  .account-link .profile-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .route-settings-profile .aside:empty {
    display: none;
  }

  .home-compose-actions.unified-entry {
    grid-template-columns: minmax(0px, 1fr);
  }

  .unified-entry :is(:is(button, :where(a.button)), a) {
    width: 100%;
  }

  .route-record-start .layout > div {
    display: block;
  }

  .route-record-start .layout,
  .route-compose .layout {
    grid-template-columns: minmax(0px, 760px);
    justify-content: center;
  }

  .journal-extras > .heading-section {
    margin-bottom: 16px;
  }

  .journal-extras details {
    margin-top: 20px;
    padding-top: 18px;
  }

  .journal-extras summary {
    font-weight: 500;
    padding: 8px 0px;
  }

  .reference-item {
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0px;
  }

  .reference-item .row label {
    margin: 0px;
  }

  .reference-item input {
    min-width: 0px;
  }

  .panel:has(.reference-items) .ui-description,
  .panel:has(a[target="_blank"]) a {
    overflow-wrap: anywhere;
  }

  .home-left .home-local-nav {
    padding-top: 0px;
  }

  .record-excerpt {
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .home-record-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
  }

  .home-record-author .profile-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .home-record-author .profile-fallback svg {
    width: 22px;
    height: 22px;
  }

  .home-record-author > span:last-child {
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .route-public .layout {
    display: block;
  }

  .route-public .layout > .aside {
    display: none;
  }

  .public-record-layout {
    display: grid;
    align-items: start;
  }

  .public-filter-sidebar {
    padding: 20px;
    border-radius: 5px;
    min-width: 0px;
  }

  .public-filter-sidebar .tabs {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
  }

  .public-filter-sidebar .tag-filter {
    padding: 0px 0px 20px;
    margin: 0px 0px 20px;
  }

  .public-filter-sidebar .tag-filter .heading-section {
    font-size: 15px;
  }

  .public-filter-sidebar .tag-filter .ui-description {
    font-size: 12px;
    line-height: 1.7;
  }

  .public-filter-sidebar .tag-filter .row {
    gap: 8px;
  }

  .public-filter-sidebar .filters {
    display: grid;
    gap: 12px;
    padding: 0px;
    margin: 0px;
  }

  .public-filter-sidebar input {
    width: 100%;
    min-width: 0px;
  }

  .public-filter-actions {
    display: grid;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
  }

  .public-record-results {
    min-width: 0px;
  }

  .public-record-results > .line {
    margin-top: 0px;
    padding-top: 0px;
  }

  .record-guide-steps {
    padding-left: 24px;
  }

  .record-guide-steps li {
    padding-left: 4px;
    margin-bottom: 20px;
  }

  .record-guide-steps .heading-item {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
  }

  .record-guide-steps .ui-description {
    font-size: 14px;
    margin: 0px;
  }

  .public-record-results .public-record {
    display: block;
    min-width: 0px;
  }

  .public-record .home-record-author {
    margin-bottom: 4px;
  }

  .public-record-date {
    font-size: 12px;
    margin: 0px 0px 16px 50px;
  }

  .public-record > .heading-section {
    margin: 12px 0px;
  }

  .public-record > .tag {
    display: inline-block;
  }

  .public-record .record-tags {
    margin: 16px 0px;
  }

  .home-discovery-grid {
    grid-template-columns: minmax(0px, 1fr);
  }

  .home-discovery-grid .home-card {
    border-radius: 0px;
  }

  .home-discovery-grid .home-card:first-child {
    padding-top: 0px;
  }

  .home-discovery-grid .home-card:last-child {
    padding-bottom: 0px;
  }

  .home-post-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0px;
  }

  .home-post-images a {
    display: block;
    max-width: 100%;
    border-radius: 5px;
  }

  .home-post-images img {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
  }

  .home-post-images .home-post-more {
    font-size: 12px;
    padding: 10px;
  }

  .record-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .record-preview-header .home-record-author {
    flex: 1 1 0%;
    min-width: 0px;
    margin: 0px;
  }

  .record-preview-header .home-record-author > span:last-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .record-preview-date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    display: flex;
    line-height: 1.5;
  }

  .record-preview-kind {
    font-weight: 400;
  }

  .public-filter-sidebar .tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button)) {
    position: relative;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 0px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: 400;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"] {
    font-weight: 500;
  }

  .public-filter-sidebar .tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 3px;
    height: 2px;
  }

  .profile-links {
    gap: 4px;
  }

  .profile-links a {
    justify-content: center;
    width: 44px;
    border-radius: 5px;
  }

  .profile-links a svg {
    width: 22px;
    height: 22px;
  }

  :root {
    --control-height: 36px;
    --compact-control-height: 36px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="file"]
    ),
  select {
    height: var(--control-height);
    min-height: var(--control-height);
    padding-block: 10px;
    min-width: 0px;
  }

  :is(button, :where(a.button)) {
    vertical-align: middle;
  }

  :is(button, :where(a.button)) svg,
  .ui-icon {
    vertical-align: middle;
    flex-shrink: 0;
  }

  .panel-search.store-search
    > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    margin: 0px;
  }

  .panel-search.event-filters > .filter-trigger,
  .panel-search.event-filters > :is(button, :where(a.button)) {
    min-height: var(--control-height);
    margin: 0px;
  }

  .row:has(> label input:not([type="checkbox"]):not([type="radio"])),
  .row:has(> label select) {
    align-items: flex-end;
  }

  .row > label:has(input:not([type="checkbox"]):not([type="radio"])),
  .row > label:has(select) {
    margin-bottom: 0px;
    min-width: 0px;
  }

  .row:has(> label input:not([type="checkbox"]):not([type="radio"])) > :is(button, :where(a.button)),
  .row:has(> label select) > :is(button, :where(a.button)) {
    min-height: var(--control-height);
    margin-block: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  [data-activity-period] {
    gap: 10px;
    align-items: flex-end;
  }

  [data-activity-period] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    margin: 0px;
    font-size: 14px;
  }

  .banner-controls,
  .banner-dots {
    display: flex;
    align-items: center;
  }

  .banner-controls :is(button, :where(a.button)) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    margin: 0px;
    padding: 0px;
    line-height: 1;
    flex-shrink: 0;
  }

  .banner-controls svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .banner-dots span {
    display: block;
    flex: 0 0 auto;
  }

  .choices label input,
  .region-row label input,
  .municipality-grid label input,
  .event-tag-options label input {
    margin: 0px;
    vertical-align: middle;
  }

  .photo select {
    height: var(--compact-control-height);
    min-height: var(--compact-control-height);
  }

  .activity-period-shortcuts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .activity-period-shortcuts a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.5;
  }

  .route-verify input[name="code"] {
    height: 64px;
    min-height: 64px;
    line-height: 1.2;
    padding-block: 12px;
  }

  .journal-input-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .journal-input-heading > label {
    margin: 0px;
    font-weight: 500;
  }

  .journal-input-heading input.journal-date {
    width: 152px;
    min-width: 0px;
    height: 44px;
    min-height: 44px;
    margin: 0px;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 400;
    flex: 0 0 152px;
  }

  .journal-date::-webkit-calendar-picker-indicator {
    padding: 4px;
  }

  #journal-impression {
    margin-top: 0px;
    margin-bottom: 20px;
    width: 100%;
  }

  .facet-count {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }

  .filter-option > span {
    min-width: 0px;
  }

  .home-account {
    padding: 20px 16px;
  }

  .home-account-top {
    position: relative;
  }

  .home-account-person {
    display: flex;
    min-width: 0px;
    padding-top: 4px;
  }

  .home-account-person .profile-avatar {
    flex: 0 0 56px;
  }

  .home-account-person strong {
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .home-account-tools {
    position: absolute;
    top: 0px;
    right: -8px;
    display: flex;
  }

  .home-account-tools a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
  }

  .home-account-tools svg {
    width: 18px;
    height: 18px;
  }

  .home-account-tools a:hover {
    border-radius: 5px;
  }

  .home-account .profile-bio {
    font-size: 12px;
    line-height: 1.7;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .home-account-stats {
    gap: 0px;
    margin-top: 20px;
    padding-block: 8px;
  }

  .home-account-stats a {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .home-account-stats span {
    font-size: 12px;
  }

  .home-account-stats strong {
    font-weight: 500;
    white-space: nowrap;
  }

  .home-account-stats small {
    font-size: 12px;
    font-weight: 400;
    margin-left: 4px;
  }

  .home-account-links {
    display: grid;
    margin-top: 12px;
  }

  .home-account-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 13px;
  }

  .home-account-links svg {
    width: 18px;
    height: 18px;
  }

  .home-account-links a > span {
    margin-left: auto;
  }
  .journal-kind-tabs {
    display: flex;
    margin: 0px 0px 24px;
  }

  .journal-kind-tabs :is(button, :where(a.button)) {
    position: relative;
    border-radius: 0px;
    min-height: 48px;
    padding: 8px 4px;
    font-weight: 400;
  }

  .journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"] {
    font-weight: 500;
  }

  .journal-kind-tabs :is(button, :where(a.button))[aria-pressed="true"]::after {
    position: absolute;
    bottom: -1px;
    left: 0px;
    right: 0px;
    height: 2px;
  }

  .journal-place .heading-section {
    font-size: 17px;
  }

  .journal-dishes .dish:first-child {
    margin-top: 0px;
    padding-top: 0px;
  }

  .journal-dishes summary,
  .journal-cooking summary {
    font-weight: 500;
  }

  :is(.route-list, .route-public) main .layout {
    display: block;
  }

  :is(.route-list, .route-public) .layout > .aside {
    display: none;
  }

  .public-record-layout {
    justify-content: center;
  }

  .record-filter-panel {
    margin: 0px;
  }

  .record-filter-panel > summary {
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    align-content: center;
  }

  .compact-record {
    display: block;
    width: 100%;
    max-width: 720px;
    min-width: 0px;
    margin-inline: auto;
  }

  .record-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 12px;
  }

  .record-meta-row .record-date {
    margin-right: auto;
  }

  .compact-record .record-excerpt {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .compact-record .home-post-images {
    margin-block: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .compact-record .home-post-images img {
    object-fit: cover;
    border-radius: 5px;
    display: block;
  }

  :is(.route-bookmarks, .route-profile, .route-cooking-history)
    .layout
    > .aside {
    display: none;
  }

  :is(.route-store-lists, .route-lists, .route-list-new, .route-list-edit)
    .aside {
    display: none;
  }
  .store-list-card .heading-section,
  .list-places .heading-section {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .store-list-card .list-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .list-create-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 5px;
    font-size: 14px;
  }

  .list-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0px;
  }

  .list-search-result > span {
    min-width: 0px;
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .list-search-result small {
    display: block;
    font-size: 12px;
  }

  .list-search-result :is(button, :where(a.button)) {
    flex-shrink: 0;
  }

  #list-store-results {
    max-height: 320px;
    overflow: auto;
    margin: 12px 0px;
  }

  .list-places {
    margin-block: 24px;
  }

  .profile-store-lists {
    margin-bottom: 28px;
  }

  [data-list-editor] section > .heading-section {
    font-size: 18px;
    margin-bottom: 16px;
  }

  [data-list-editor] .panel strong {
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  [data-list-editor] .row.between {
    flex-wrap: wrap;
  }
  :root {
    --column-reading: 720px;
    --column-side: 240px;
    --layout-gap: 24px;
  }
  body[data-page-layout] {
    --page-content-width: var(--content-width);
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    .panel:not(.panel .panel) {
    width: 100%;
    max-width: none;
    padding-inline: max(
      var(--page-gutter),
      calc((100% - var(--column-reading)) / 2)
    );
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    > div {
    width: 100%;
    max-width: none;
    padding-inline: max(
      var(--page-gutter),
      calc((100% - var(--column-reading)) / 2)
    );
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    > div:has(.panel) {
    padding: 0;
  }
  body[data-page-layout] main {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
  }
  body[data-page-layout] main > * {
    max-width: var(--page-content-width);
    margin-inline: auto;
  }
  body[data-page-layout] main > .topline {
    width: 100%;
    max-width: var(--page-content-width);
    margin-inline: auto;
  }
  body[data-page-layout] main > .layout {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    gap: var(--layout-gap);
    width: 100%;
    max-width: var(--page-content-width);
    margin-inline: auto;
    justify-content: start;
  }

  body[data-page-layout="collection"] main > .layout:has(> .aside > *) {
    grid-template-columns: minmax(0, 1fr) var(--column-side);
  }

  body[data-page-layout="collection"]:is(.route-list, .route-public)
    main
    > .layout {
    display: block;
  }

  body[data-page-layout="collection"]:is(
      .route-mypage,
      .route-bookmarks,
      .route-store-lists,
      .route-profile,
      .route-cooking-history
    )
    main
    > .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-layout="focused"] main > .layout > .aside,
  body[data-page-layout="auth"] main > .layout > .aside {
    padding: 24px;
  }

  body[data-page-layout] .public-record-layout {
    grid-template-columns: var(--column-side) minmax(0, 1fr);
    gap: var(--layout-gap);
    justify-content: start;
  }

  body[data-page-layout] .activity-record {
    max-width: none;
    margin-inline: 0px;
    overflow-wrap: anywhere;
  }

  body[data-page-layout] .compact-record {
    max-width: 100%;
    margin-inline: 0px;
  }

  body[data-page-layout] main > .profile-summary {
    width: 100%;
    margin-inline: auto;
  }

  body[data-page-layout] .public-filter-sidebar .tabs {
    gap: 10px;
  }

  body[data-page-layout] .public-filter-sidebar .tabs :is(button, :where(a.button)) {
    font-size: 13px;
  }

  body[data-page-layout] .section-title {
    gap: 16px;
    flex-wrap: wrap;
  }
  .profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0px;
  }

  .profile-name-row .heading-section {
    margin: 0px;
    min-width: 0px;
    overflow-wrap: anywhere;
  }

  .profile-public-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 5px;
  }

  .profile-public-link svg {
    width: 18px;
    height: 18px;
  }

  body[data-page-layout] main > .layout + .panel {
    margin-top: 24px;
  }

  body {
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt", "trad";
  }

  body[data-page-layout="personal"] main > .mypage-tabs {
    width: 100%;
  }

  body[data-page-layout="personal"] .mypage-tabs a {
    flex: 1 1 0%;
    text-align: center;
    min-width: 0px;
  }

  body[data-page-layout="personal"] .public-record-layout {
    grid-template-columns: minmax(0px, 1fr);
  }
  a.text-link {
    font-weight: 600;
  }
  a.text-link:hover {
    text-decoration: none;
  }
  .magazine-grid {
    display: grid;
  }
  .magazine-card {
    min-width: 0;
  }
  .magazine-card > a {
    display: block;
  }
  .magazine-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 5px;
  }
  .magazine-card .heading-section {
    margin: 16px 0 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .magazine-published {
    margin: 0;
    font-size: 14px;
  }
  .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--header-action-gap);
  }
  .header-actions .nav-create {
    font-size: 14px;
    line-height: 1.5;
    margin-left: 0;
    white-space: nowrap;
  }
  .date-filter-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 10px;
    border-radius: 5px;
  }
  .date-filter-label {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }
  .date-filter-field input.date-filter-input[type="date"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
  }
  .activity-month-field input[type="month"] {
    margin-top: 0;
  }
  .registration-area-field {
    min-width: 0;
    margin-bottom: 18px;
    font-size: 14px;
  }
  .registration-area-field > span {
    display: block;
    margin-bottom: 6px;
  }
  .registration-area-field .filter-trigger {
    width: 100%;
  }
  .registration-area-field .filter-trigger > span:first-child {
    overflow-wrap: anywhere;
  }
  .store-overview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .store-area {
    font-size: 14px;
  }
  .store-primary-actions {
    margin-bottom: 32px;
  }
  .store-primary-actions a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 5px;
  }
  .store-info {
    margin: 0;
  }
  .store-info-row {
    display: grid;
    padding: 20px 0;
  }
  .store-info-row dt {
    font-weight: 600;
  }
  .store-info-row dd {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .store-social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .store-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    max-width: 100%;
    font-weight: 600;
  }
  .store-social-link span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .store-social-link svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .store-extra-fields {
    margin: 24px 0;
  }
  .store-extra-fields summary {
    font-weight: 600;
    margin-bottom: 20px;
  }
  .store-records {
    margin-top: 32px;
  }

  .store-map {
    display: block;
    width: 100%;
    margin-top: 16px;
    border-radius: 5px;
  }
  .store-choice-field {
    min-width: 0;
    padding: 0;
    margin: 24px 0 12px;
  }
  .store-choice-field legend {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 0;
  }
  .store-choice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .store-choice-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-height: 44px;
  }
  .store-choice-options input {
    flex: 0 0 auto;
    margin: 0;
    width: 18px;
    height: 18px;
  }
  .store-seat-fields {
    display: grid;
    gap: 16px;
  }
  .store-field {
    min-width: 0;
  }
  [data-store-weekdays][hidden] {
    display: none;
  }
  main details {
    --disclosure-duration: 420;
  }
  .policy-status {
    font-size: 14px;
    margin: 0 0 24px;
  }
  .policy-section + .policy-section {
    margin-top: 32px;
  }
  .policy-body {
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 24px;
  }
  .journal-input-heading {
    flex-wrap: wrap;
  }
  .store-seat-fields {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }
  /* スマホのカラム・ヘッダー・アカウント表示 */

  .home-intro {
    grid-template-columns: 1fr 380px;
    gap: 24px;
  }

  .home-compose,
  .home-notebook {
    padding: 20px;
  }

  .header nav {
    gap: 14px;
    font-size: 13px;
  }

  .store-search :is(button, :where(a.button)) {
    min-height: 48px;
  }

  .store-search > input,
  .store-search > :is(button, :where(a.button))[type="submit"] {
    min-width: 0px;
    width: 100%;
  }

  .home-left.home-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: static;
    grid-column: 1 / -1;
  }

  .home-account-top {
    min-width: 0px;
    flex: 1 1 0%;
  }

  .home-account-person {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0px;
  }

  .home-account-person .profile-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .home-account-person strong {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-account-tools,
  .home-account .profile-bio,
  .home-account-links {
    display: none;
  }

  .home-account-stats {
    display: block;
    margin: 0px;
    padding: 0px;
    border: 0px;
    flex-shrink: 0;
  }

  .home-account-stats a {
    display: none;
  }

  .home-account-stats a.home-month-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-height: 44px;
  }

  .home-account-stats strong {
    font-size: 17px;
  }

  body[data-page-layout] .panel-search.store-search {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .brand span {
    display: none;
  }

  nav {
    font-size: 13px;
  }

  .prototype > span:nth-child(2) {
    max-width: 65%;
  }

  .topline > .primary {
    font-size: 14px;
    white-space: nowrap;
  }

  .steps {
    font-size: 12px;
  }

  nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .header nav {
    justify-content: flex-start;
  }

  .home-section .section-title {
    gap: 12px;
    flex-wrap: wrap;
  }

  .wire-controls label {
    flex-wrap: wrap;
  }

  .prototype {
    justify-content: flex-start;
  }

  .prototype > span:nth-child(2) {
    display: none;
  }

  .prototype > span:first-child {
    margin-right: auto;
  }

  .header {
    flex-direction: row;
    align-items: center;
  }

  .brand {
    font-size: 25px;
  }

  .brand .brand-dot {
    display: inline;
  }

  .mobile-bottom {
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(12px);
    height: calc(68px + env(safe-area-inset-bottom));
    justify-content: space-around;
    align-items: center;
    z-index: 30;
  }

  .mobile-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    justify-content: center;
    color: rgb(119, 119, 119);
    text-decoration: none;
  }

  .mobile-bottom .ui-icon {
    width: 21px;
    height: 21px;
  }

  .mobile-bottom .active {
    color: rgb(34, 34, 34);
  }

  .mobile-bottom .active .ui-icon {
    color: var(--color-accent);
  }

  .mobile-bottom .create .ui-icon {
    background: var(--color-accent);
  }

  .mobile-bottom .create {
    gap: 1px;
  }

  main {
    padding: 27px 18px 40px;
  }

  .heading-page {
    letter-spacing: -0.7px;
  }

  .heading-item {
    font-size: 17px;
  }

  .topline {
    flex-wrap: wrap;
    margin-bottom: 23px;
  }

  .topline > .row {
    width: 100%;
  }

  .topline > .row :is(button, :where(a.button)) {
    flex: 1 1 0%;
  }

  .layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aside {
    font-size: 14px;
    order: 2;
  }

  .panel {
    padding: 21px 18px;
    border-radius: 18px;
    margin-bottom: 20px;
  }

  .filters,
  .two {
    grid-template-columns: 1fr;
  }

  .filters {
    padding: 17px;
  }

  .record {
    grid-template-columns: 48px minmax(0px, 1fr);
    border-radius: 17px;
  }

  .date {
    font-size: 11px;
  }

  .date strong {
    font-size: 26px;
  }

  .tag-filter .ui-description {
    font-size: 12px;
  }

  .tag-button {
    font-size: 12px;
  }

  .record-preview {
    max-height: 200px;
  }

  .dish {
    padding: 17px 14px;
  }

  .dish .row {
    align-items: flex-start;
  }

  .sensory {
    padding: 16px 12px;
  }

  .choices label {
    font-size: 13px;
    padding: 8px;
    min-height: 42px;
  }

  .actions {
    flex-wrap: wrap;
    gap: 9px;
  }

  .actions :is(button, :where(a.button)).primary {
    flex: 1 1 0%;
  }

  .store {
    padding: 20px;
  }

  .home-intro {
    display: block;
    padding: 3px 0px 24px;
  }

  .home-intro .heading-page {
    font-size: 24px;
    line-height: 1.65;
  }

  .home-intro .ui-description {
    font-size: 13px;
  }

  .daily-note {
    margin-top: 23px;
    padding: 20px 17px;
    border-radius: 22px;
  }

  .daily-note .heading-section {
    font-size: 16px;
  }

  .daily-note .ui-description {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .home-intro .row :is(button, :where(a.button)) {
    font-size: 12px;
  }

  .daily-note .note-help {
    font-size: 12px;
  }

  .daily-note .note-links {
    font-size: 12px;
    flex-wrap: wrap;
  }

  .daily-shortcuts {
    gap: 10px;
    margin: 0px 0px 10px;
  }

  .daily-shortcuts a {
    border: 0px;
    padding: 0px;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .daily-shortcuts .ui-icon {
    background: var(--color-inset);
    border-radius: 14px;
    width: 46px;
    height: 46px;
    padding: 11px;
  }

  .home-section {
    padding: 28px 0px;
  }

  .home-grid,
  .layout .home-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 12px;
  }

  .home-card {
    padding: 11px;
    border-radius: 15px;
  }

  .home-card .heading-item {
    font-size: 15px;
    line-height: 1.7;
    margin: 10px 0px;
  }

  .home-card :is(.article-summary, .event-venue, .record-byline) {
    font-size: 13px;
  }

  .home-card .muted {
    font-size: 12px;
  }

  .record-cover {
    height: 145px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .editorial-cover {
    border-radius: 10px;
    margin-bottom: 13px;
  }

  .home-card .row {
    gap: 5px;
  }

  .home-card .tag-button {
    font-size: 11px;
    padding: 5px 7px;
  }

  .home-section[data-content="magazine"] .home-grid,
  .home-section[data-content="events"] .home-grid {
    grid-template-columns: 1fr;
  }

  .home-section[data-content="magazine"] .home-card {
    padding: 15px;
  }

  .home-section[data-content="magazine"] .home-card .heading-item {
    font-size: 19px;
  }

  .home-section[data-content="events"] .home-card {
    padding: 20px;
  }

  .store-search {
    grid-template-columns: 1fr;
  }

  .store-search :is(button, :where(a.button)) {
    margin-top: 4px;
  }

  .news-list li {
    gap: 6px;
    flex-direction: column;
    font-size: 14px;
  }

  .section-title {
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }

  .section-title .heading-section {
    font-size: 20px;
  }

  .section-title a {
    font-size: 12px;
  }

  .wire-controls {
    gap: 8px;
    padding: 11px;
    margin-bottom: 23px;
  }

  .wire-controls :is(button, :where(a.button)),
  .wire-controls label {
    font-size: 12px;
  }

  .wire-controls > span {
    display: none;
  }

  .site-footer {
    margin: 0px 18px;
    padding: 28px 0px 110px;
    border-top:none !important;
  }

  .site-footer > div {
    font-size: 12px;
  }

  .site-footer small {
    font-size: 11px;
  }

  #notice {
    bottom: 85px;
    font-size: 13px;
    min-width: 220px;
    text-align: center;
  }

  .screen-links {
    grid-template-columns: 1fr;
  }

  .screen-links a {
    font-size: 14px;
  }

  .design-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-inventory {
    grid-template-columns: 1fr;
  }

  .type-display {
    font-size: 26px;
  }

  dialog {
    padding: 25px 21px;
    border-radius: 20px;
  }

  .photos .photo {
    width: calc(50% - 8px);
  }

  .photos .photo img {
    width: 100%;
    height: 120px;
  }

  .photo select {
    font-size: 12px;
  }

  .article-hero {
    border-radius: 14px;
    max-height: 260px;
  }

  .route-compose .layout {
    grid-template-columns: 1fr;
  }

  .route-compose .aside {
    position: static;
  }

  .route-magazine .article-body {
    font-size: 16px;
    padding: 22px;
  }

  .event-cover {
    min-height: 130px;
  }

  .route-profile .topline .heading-page {
    font-size: 27px;
  }

  .route-profile .topline .heading-page::before {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }

  .route-home main {
    padding: 22px 18px 36px;
  }

  .personal-home {
    grid-template-columns: minmax(0px, 1fr);
  }

  .personal-home > .home-banners {
    margin-inline: calc(-1 * var(--page-gutter));
  }

  .personal-home > .home-banners .banner-slides {
    border-radius: 0;
  }

  .home-left {
    display: none;
  }

  .home-center {
    gap: 24px;
  }

  .home-compose {
    padding: 0px 0px 24px;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-image: none;
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
  }

  .home-heading .heading-page {
    letter-spacing: -0.8px;
  }

  .home-heading .ui-description {
    font-size: 14px;
  }

  .home-compose-actions {
    gap: 10px;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    padding: 0;
    gap: 8px;
  }

  .home-compose-actions strong {
    font-size: 16px;
    color: white;
  }

  .home-compose-foot {
    margin-top: 12px;
  }

  .home-notebook {
    border-radius: 18px;
  }

  .personal-home .heading-section {
    font-size: 18px;
  }

  .home-notebook .home-kicker {
    display: none;
  }

  .home-entry {
    gap: 12px;
    padding: 16px 0px;
  }

  .home-notebook > .ui-description {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .home-discovery-grid {
    gap: 12px;
  }

  .home-discovery-grid .home-card {
    border: 0px;
  }

  .home-discovery-grid .heading-item {
    font-size: 15px;
  }

  .home-discovery-grid .tag {
    font-size: 11px;
  }

  .home-discover .section-title a {
    font-size: 12px;
  }

  .home-section-copy {
    font-size: 13px;
  }

  .home-right {
    gap: 28px;
    border-top: 1px solid var(--color-border);
  }

  .home-side-section .home-card {
    display: grid;
    grid-template-columns: 116px minmax(0px, 1fr);
    column-gap: 16px;
    align-content: start;
  }

  .home-side-section .home-card > img,
  .home-side-section .home-card > .event-cover {
    grid-area: 1 / 1 / 5;
    width: 116px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0px;
  }

  .home-side-section .home-card > * {
    grid-column: 2;
  }

  .home-side-section .home-card .heading-item {
    font-size: 15px;
    margin: 3px 0px;
  }

  .home-side-section
    .home-card
    :is(.article-summary, .event-venue, .record-byline) {
    font-size: 12px;
  }

  .home-side-section .event-cover {
    padding: 12px;
    min-height: 116px;
  }

  .home-side-section .event-cover strong {
    line-height: 1.4;
    margin-top: 8px;
  }

  .home-side-section .event-cover span {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .home-news {
    font-size: 14px;
  }

  .route-home .site-footer {
    margin: 0px 18px;
  }

  .route-home .mobile-bottom {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  :root {
    --page-gutter: 16px;
  }

  html {
    scroll-padding-top: 90px;
  }

  body {
    padding-bottom: 80px;
  }

  .header {
    min-height: 78px;
    padding: 10px var(--page-gutter);
  }

  .brand img {
    width: 75px;
  }

  .header nav {
    display: none;
  }

  .site-menu {
    display: block;
    margin-left: auto;
  }

  .account-link {
    width: 38px;
    height: 38px;
  }

  .prototype {
    padding: 6px 18px;
    gap: 10px;
  }

  .prototype > span:first-child {
    font-size: 11px;
  }

  .prototype > a,
  .prototype > :is(button, :where(a.button)) {
    font-size: 12px;
  }

  main,
  .route-home main {
    padding: 24px var(--page-gutter) 40px;
  }

  .layout,
  :is(
      .route-compose,
      .route-review,
      .route-detail,
      .route-guest,
      .route-community
    )
    .layout {
    grid-template-columns: minmax(0px, 1fr);
    gap: 28px;
  }

  .aside {
    border-left: 0px;
    border-top: 1px solid var(--color-border);
    padding: 24px 0px 0px;
  }

  .topline {
    align-items: flex-start;
    gap: 16px;
  }

  .heading-page {
    font-size: 20px;
  }

  .heading-section {
    font-size: 17px;
  }

  .home-heading .heading-page {
    font-size: 18px;
  }

  .home-notebook {
    padding: 20px 16px;
  }

  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    min-height: 60px;
  }

  .panel,
  .store,
  .dish {
    padding: 20px;
  }

  .record {
    padding: 18px;
    gap: 14px;
  }

  .record .heading-section {
    font-size: 16px;
  }

  .home-entry strong {
    font-weight: 500;
    font-size: 15px;
  }

  .home-entry small {
    font-size: 12px;
  }

  .home-compose-actions small {
    font-size: 12px;
  }

  .home-side-section .event-cover strong {
    font-size: 16px;
  }

  .site-footer,
  .route-home .site-footer {
    padding: 16px 0px 0px;
  }

  .site-footer > div {
    gap: 0px 14px;
  }

  .mobile-bottom {
    background: white;
    border-top: 1px solid var(--color-border);
    box-shadow: none;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    gap: 0px;
  }

  .mobile-bottom a {
    font-weight: 400;
    font-size: 12px;
    min-height: 48px;
  }

  .mobile-bottom .create {
    background: transparent;
    color: rgb(34, 34, 34);
    border-radius: 0px;
  }

  .mobile-bottom .create svg {
    background: rgb(34, 34, 34);
    color: rgb(255, 255, 255);
    border-radius: 8px;
    padding: 4px;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
  }

  .mobile-bottom a.active {
    font-weight: 500;
  }

  .mobile-bottom a.active .ui-icon {
    color: var(--color-accent);
  }

  .mobile-bottom a.active.create .ui-icon {
    color: rgb(255, 255, 255);
  }

  .route-record-start .layout > div {
    grid-template-columns: minmax(0px, 1fr);
  }

  .route-login .layout > div,
  .route-verify .layout > div,
  .route-onboarding .layout > div {
    padding: 20px;
  }

  .ds-spacing {
    gap: 10px;
  }

  .mobile-bottom .create .ui-icon {
    /* background: rgb(34, 34, 34); */
    color: rgb(255, 255, 255);
    border-radius: 8px;
    width: 20px;
    height: 20px;
    padding: 4px;
  }

  .mobile-bottom span {
    font-size: 10px;
  }

  .account-link {
    margin-left: 0px;
  }

  .store-search,
  .event-area-fields {
    grid-template-columns: minmax(0px, 1fr);
    gap: 16px;
  }

  .event-filters {
    padding: 18px 16px;
  }

  .event-dates {
    grid-template-columns: minmax(0px, 1fr);
  }

  .event-dates > span {
    display: none;
  }

  .event-tag-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .event-tag-options label {
    padding: 10px;
    white-space: nowrap;
  }

  .home-compose {
    border-radius: 0px;
  }

  .route-login .layout > div,
  .route-verify .layout > div,
  .route-onboarding .layout > div {
    border-radius: 5px;
  }

  .store-search .filter-trigger {
    grid-column: 1 / -1;
  }

  .filter-dialog {
    width: 100%;
    max-height: 90dvh;
    margin: auto 0px 0px;
    max-width: 100%;
    border-radius: 5px 5px 0px 0px;
  }

  .filter-dialog header {
    padding: 16px 18px;
  }

  .filter-body {
    padding: 0px 18px;
  }

  .filter-dialog footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }

  .region-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 0px;
  }

  .region-row > div {
    grid-template-columns: repeat(2, 1fr);
  }

  .store-area-selects {
    grid-template-columns: 1fr;
  }

  .filter-trigger {
    font-size: 14px;
    padding: 10px 12px;
    gap: 10px;
  }

  .header {
    gap: 8px;
  }

  .notification-link {
    width: 36px;
  }

  .filter-dialog .event-dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .filter-dialog .event-dates > span {
    display: none;
  }

  .route-design-system .type-guide-grid {
    grid-template-columns: 1fr;
  }

  .route-design-system .type-guide-card {
    padding: 18px;
  }

  .panel-search.store-search {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .store-search > .filter-trigger {
    grid-column: auto;
    font-size: 13px;
    padding: 10px;
  }

  .store-search > input {
    grid-column: 1 / -1;
  }

  .store-search > :is(button, :where(a.button))[type="submit"] {
    grid-column: 1 / -1;
  }

  .municipality-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .banner-controls :is(button, :where(a.button)) {
    min-height: 35px;
  }

  .banner-dots :is(button, :where(a.button)) {
    width: 30px;
  }

  .home-compose,
  .home-notebook,
  .home-discover {
    padding: 20px 18px;
    border: 0px;
    border-radius: 5px;
  }

  .home-store-entry {
    padding: 4px 18px;
  }

  .home-side-section {
    padding: 18px;
  }

  .home-right {
    border: 0px;
    padding-top: 0px;
  }

  .home-discovery-grid .home-card {
    padding: 0px;
    background: transparent;
  }

  .aside:not(:empty) {
    padding: 20px;
  }

  .route-stores .store-search,
  .route-events .event-filters {
    padding: 16px;
  }

  .activity-stats {
    gap: 8px;
  }

  .activity-stats > div {
    padding: 12px 8px;
  }

  .activity-stats strong {
    font-size: 25px;
  }

  .activity-stats span {
    font-size: 12px;
  }

  .mypage-tabs {
    width: 100%;
    gap: 4px;
  }

  .mypage-tabs a {
    flex: 1 1 0%;
  }

  .profile-summary {
    padding: 20px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .profile-copy .heading-section {
    font-size: 18px;
  }

  .profile-actions {
    flex-basis: 100%;
    flex-flow: wrap;
    align-items: center;
    border-top: 1px solid rgb(238, 238, 238);
    padding-top: 14px;
    gap: 12px 18px;
  }

  .registration-area {
    grid-template-columns: 1fr;
  }

  .profile-links a {
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .store-registration-entry {
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-stats {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .reference-item .row {
    align-items: flex-start;
  }

  .journal-main textarea {
    min-height: 160px;
  }

  .public-record-layout {
    gap: 20px;
  }

  .public-filter-sidebar .tabs {
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }

  .public-filter-actions {
    grid-template-columns: 1fr 1fr;
  }

  .home-post-images > a:not(.home-post-more) {
    width: calc(33.3333% - 5.33333px);
  }

  .home-post-images img {
    width: 100%;
  }

  .record-preview-date {
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
  }

  .record-preview-separator {
    display: none;
  }

  .record-preview-header {
    gap: 8px;
  }

  .record-preview-header .home-record-author {
    gap: 8px;
  }

  [data-activity-period] > label {
    flex: 1 1 160px;
  }

  [data-activity-period] > a {
    min-height: 44px;
  }

  .reference-item .row:has(> label select) {
    align-items: flex-end;
  }

  [data-activity-period] .activity-period-shortcuts {
    flex-basis: 100%;
  }

  .activity-period-shortcuts a {
    min-height: 44px;
  }

  .route-design-system .design-grid {
    grid-template-columns: minmax(0px, 1fr);
  }

  .journal-kind-tabs {
    gap: 24px;
    margin-bottom: 16px;
  }

  .public-record-layout {
    grid-template-columns: minmax(0px, 1fr);
  }

  .record-filter-panel {
    padding: 8px 0px;
  }

  .record-filter-panel[open] > summary {
    margin-bottom:0;
  }

  .public-filter-sidebar .filters {
    grid-template-columns: minmax(0px, 1fr);
  }

  .compact-record .home-post-images img {
    width: 100px;
    height: 75px;
  }

  .record-meta-row {
    gap: 6px;
  }

  .mypage-tabs a {
    padding: 10px 6px;
    font-size: 13px;
  }

  .list-places .panel {
    padding: 18px;
  }

  body[data-page-layout] main {
    padding: 24px var(--page-gutter) 40px;
  }

  body.route-home main {
    padding-top: 0;
  }

  body[data-page-layout] main > .layout,
  body[data-page-layout="collection"] main > .layout:has(> .aside > *),
  body[data-page-layout] .public-record-layout {
    grid-template-columns: minmax(0px, 1fr);
    gap: var(--layout-gap);
  }

  body[data-page-layout] .panel,
  body[data-page-layout] .profile-summary {
    padding: 20px;
  }

  body[data-page-layout] main > .layout > .aside {
    border: 0px;
    padding: 20px;
  }

  .magazine-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .header-actions {
    --header-action-gap: 8px;
  }
  .header-actions .nav-create {
    display: none;
  }

  .store-info-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
  }
  .store-primary-actions {
    gap: 8px;
  }

  .store-map {
    height: 180px;
  }

  /* 白背景ではカードの塗り分けに頼らず、余白と罫線で区切る。 */
  :root {
    --color-bg: #ffffff;
    --color-inset: #ffffff;
  }

  .personal-home {
    gap: 24px;
  }
  .home-left.home-account {
    padding: 0 0 20px;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .home-center,
  .home-right {
    gap: 28px;
  }
  .home-compose,
  .home-notebook,
  .home-discover,
  .home-store-entry,
  .home-side-section {
    padding: 0;
    border-radius: 0;
  }
  .home-store-entry {
    padding-block: 16px;
    border-block: 1px solid var(--color-border);
  }
  .home-side-section {
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
  }
  .home-compose-actions {
    margin-top: 16px;
  }
  .home-compose-actions :is(:is(button, :where(a.button)), a) {
    border: 1px solid var(--color-border);
    background-color: #ff4d46;
  }

  body[data-page-layout] .panel,
  body[data-page-layout] .profile-summary,
  .filters,
  .route-stores .store-search,
  .route-events .event-filters,
  .aside:not(:empty) {
    padding-inline: 0;
    border-radius: 0;
  }
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    .panel:not(.panel .panel),
  body:is([data-page-layout="focused"], [data-page-layout="auth"])
    main
    > .layout
    > div {
    padding-inline: 0;
  }
  .panel + .panel,
  .record,
  .store {
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }
  .record,
  .store {
    padding-inline: 0;
  }
  /* スマホのマイページ：プロフィール・タブ・各コンテンツの区切りを共通化。 */
  body[data-page-layout="personal"] main > .profile-summary,
  body[data-page-layout="personal"] main > .mypage-tabs,
  body[data-page-layout="personal"] main > .layout > div > .panel,
  body[data-page-layout="personal"] main > .layout > div > .row,
  body[data-page-layout="personal"] .public-filter-sidebar,
  body[data-page-layout="personal"] .public-record-results > .panel {
    border-bottom: 1px solid var(--color-border);
  }

  .mypage-tabs a[aria-current="page"] {
    /* box-shadow: inset 0 -2px var(--color-accent); */
    border-radius: 0;
  }
}
/* アクセシビリティ：画面幅から独立。 */
@media (prefers-reduced-motion: no-preference) {
  :is(button, :where(a.button)),
  a {
    transition:
      background 0.15s,
      border-color 0.15s;
  }
}

/* Astro SSR: keep the same 1050px shell, with component-specific address layout. */
.registration-address-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.registration-address-row .registration-area{min-width:0}
.registration-address-row>label{min-width:0}
.store-search-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) auto;gap:12px;align-items:center}
.store-search-fields input{margin:0;min-width:0}
.store-search-fields .filter-trigger{min-width:0}
.filter-option.is-disabled{color:#999;cursor:not-allowed}
[hidden]{display:none!important}

/* Navigation links retain button geometry without increasing selector specificity. */
a.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* Shared store representative photos */
.route-stores .store {display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px}
.store-cover,.store-hero {display:block;overflow:hidden;border-radius:5px;background:#ededed}
.store-cover {width:112px;aspect-ratio:4/3}
.store-cover img,.store-hero img {width:100%;height:100%;object-fit:cover;display:block}
.store-cover span,.store-cover-empty {display:grid;place-items:center;width:100%;height:100%;color:#707070;font-size:12px;text-align:center}
.store-hero {aspect-ratio:16/9;max-height:380px;margin-bottom:24px}
.store-cover-empty {font-size:14px}
.store-photo-preview img {display:block;width:min(100%,320px);aspect-ratio:4/3;object-fit:cover;border-radius:5px;margin:12px 0}
.store-candidate {padding:12px 0;border-bottom:1px solid #e6e6e6}
@media(max-width:560px){.route-stores .store{grid-template-columns:96px minmax(0,1fr)}.store-cover{width:96px}}

/* Adopted 2026-09-24 home layout. */
/* 採用済みホーム。従来版は /?layout=previous に残す。 */
.home-discovery-more {
  margin: 20px 0 0;
  width: 100%;
}
.home-discovery-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 5px;
  background: var(--color-accent);
  color: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
}
.home-discovery-button:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface);
  text-decoration: none;
}
.personal-home.home-proposal {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.home-proposal-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.home-proposal .home-compose,
.home-proposal .home-store-search,
.home-proposal .home-proposal-picks,
.home-proposal .home-discover,
.home-proposal-main > .home-side-section {
  background: #fff;
  border: 0;
  border-radius: 5px;
  padding: 24px;
  min-width: 0;
}
.home-proposal .home-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.home-compose-identity { display: none; }
.home-proposal .home-compose .heading-page { margin: 4px 0 8px; }
.home-kind-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-kind-choices :is(button, a) {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 96px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: #fff;
  color: var(--color-text);
  text-align: left;
}
.home-kind-choices :is(button, a):hover,
.home-kind-choices :is(button, a):focus-visible { border-color: #ff4d46; outline-color: #ff4d46; }
.home-kind-choices strong { font-size: 18px; }
.home-kind-choices span { color: var(--color-muted); font-size: 13px; }
.home-proposal .home-store-search > .heading-section { margin: 0 0 16px; }
.home-proposal .home-store-search .store-search {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-proposal-picks > .heading-section { margin-bottom: 18px; }
.home-proposal-featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.home-proposal-editorial { display: grid; gap: 20px; min-width: 0; }
.home-proposal-editorial .home-side-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.home-proposal-editorial .home-side-section + .home-side-section { padding-top: 18px; border-top: 1px solid var(--color-border); }
.home-proposal .home-discover .section-title { margin-bottom: 16px; }
.home-proposal .home-discovery-more { margin-top: 24px; }
.home-proposal-main > .home-side-section { margin: 0; }
/* Astroホーム：PCの追加指定。上書き順と既存の境界を維持。 */
.profile-social-links .profile-social-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.profile-social-links .profile-social-icon img { display: block; width: 23px; height: auto; object-fit: contain; }

.form-required-mark { color: var(--color-danger); margin-inline-start: .25em; font-weight: 700; }

/* Editorial controls are enhanced on desktop only. */
.home-editorial-actions { display: contents; }
.home-editorial-controls { display: none; }
@media (min-width: 761px) {
  .home-editorial-actions { display: flex; align-items: center; gap: 16px; }
  .home-editorial-controls:not([hidden]) { display: flex; gap: 8px; }
  .home-editorial-controls button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
  .home-editorial-controls button svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .home-editorial-controls button:disabled { opacity: .35; cursor: default; }
  .home-editorial-controls button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .home-editorial-track.is-draggable, .home-editorial-track.is-draggable a { cursor: grab; }
  .home-editorial-track.is-draggable { user-select: none; }
  .home-editorial-track.is-dragging, .home-editorial-track.is-dragging a { cursor: grabbing; }
  .home-proposal-editorial .home-editorial-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }

  .home-proposal-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .home-proposal-editorial .home-side-section { flex-direction: column; justify-content: center; min-height: 0; }
  .home-proposal-editorial .home-side-section + .home-side-section { padding-top: 4px; }
  .home-proposal-editorial .home-card { display: grid; align-items: start; }
  .home-proposal-editorial .home-card > :is(img, .event-cover) { grid-column: 1; grid-row: 1 / span 6; min-height: 0; aspect-ratio: 1; object-fit: cover; margin: 0; padding: 8px; }
  .home-proposal-editorial .home-card > img { padding: 0; }
  .home-proposal-editorial .home-card > :not(img):not(.event-cover) { grid-column: 2; }
  .home-proposal-editorial .home-card .heading-item { margin: 2px 0; line-height: 1.4; }
  .home-proposal-editorial .home-card .article-summary { -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin: 0; line-height: 1.4; }
  .home-proposal-editorial .event-cover strong { letter-spacing: -0.5px; white-space: nowrap; }
  .home-proposal-editorial .home-card > :is(.event-meta, .event-venue) { display: none; }
  .home-proposal-editorial .home-card > .home-editorial-date { display: none; }
@media (min-width: 900px) {
  .home-proposal-editorial .home-card { grid-template-columns: 88px minmax(0, 1fr); height: 88px; }
  .home-proposal-editorial .home-card > :is(img, .event-cover) { width: 88px; height: 88px; }
}
@media (min-width: 1150px) {
  .personal-home.home-proposal { grid-template-columns: minmax(190px, var(--column-side)) minmax(0, 1fr); }
  .home-proposal > .home-left { display: grid; }
}
@media (min-width: 761px) and (max-width: 1149px) {
  .home-proposal > .home-left { display: none; }
}
  .home-proposal-picks { overflow: hidden; }
  .home-proposal-picks .banner-slides { position: relative; aspect-ratio: 160 / 63; overflow: hidden; border-radius: 0; }
  .home-proposal-picks .banner-track { position: relative; display: flex; gap: 2.8%; width: 100%; height: 100%; }
  .home-proposal-picks .banner-slide { flex: 0 0 70%; width: 70%; height: 100%; border-radius: 5px; overflow: hidden; }
  .home-proposal-picks .banner-slide img { aspect-ratio: 16 / 9; }
  .home-proposal-editorial { grid-template-rows: none; padding: 24px; border-radius: 5px; background: #fff; }
  .home-proposal-editorial .home-side-section { display: block; }
  .home-proposal-editorial .home-card { grid-template-columns: 116px minmax(0, 1fr); gap: 0 16px; height: auto; min-height: 116px; overflow: visible; }
  .home-proposal-editorial .home-card > :is(img, .event-cover) { width: 116px; height: 116px; }
  .home-proposal-editorial .home-card > span.muted { display: block; }
  .home-proposal-editorial .home-card .heading-item { font-size: 16px; }
  .home-proposal-editorial .home-card .article-summary { display: block; font-size: 13px; }
  .home-proposal-editorial .event-cover strong { font-size: 14px; }
@media (min-width: 761px) and (max-width: 1050px) {
  .home-proposal-editorial .home-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 88px; gap: 0 12px; }
  .home-proposal-editorial .home-card > :is(img, .event-cover) { width: 88px; height: 88px; }
  .home-proposal-editorial .home-side-section + .home-side-section { padding-left: 16px; }
}
  .home-proposal-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-proposal-editorial .home-side-section + .home-side-section {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }
  .home-proposal-editorial .section-title { margin-bottom: 16px; }
  .home-proposal-editorial .home-editorial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 34%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  .home-proposal-editorial .home-editorial-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .home-proposal-editorial .home-editorial-track > .home-card,
  .home-proposal-editorial .home-editorial-track > .home-card:not(:first-child) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: auto;
    gap: 0;
    overflow: visible;
    scroll-snap-align: start;
  }
  .home-proposal-editorial .home-editorial-track .home-card > :is(img, .event-cover) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 0 12px;
    border-radius: 5px;
  }
  .home-proposal-editorial .home-editorial-track .home-card > :is(span.muted, .article-summary, .event-meta, .event-venue) { display: none; }
  .home-proposal-editorial .home-editorial-track .heading-item { margin: 0 0 8px; font-size: 15px; }
  .home-proposal-editorial .home-editorial-track .home-editorial-date { display: block; margin: 0; font-size: 13px; }
}
.home-proposal-picks .banner-track { transition: transform .35s ease; }
@media (prefers-reduced-motion: reduce) {
  .route-home {
    scroll-behavior: auto;
  }
  .home-proposal-picks .banner-track { transition: none; }
}


/* Astro のリンクとサーバー描画に合わせた補正。 */
.home-kind-choices a { text-decoration: none; }
.home-proposal-picks .home-banners { width: 100%; }
/* MCC-034: transform owns the banner position; prevent a second native scroll offset. */
.home-proposal-picks .banner-slides { aspect-ratio: 16 / 6.3; overflow: clip; }
.home-proposal-picks .banner-track { position: relative; display: flex; height: 100%; }
.home-proposal-picks .banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-proposal-editorial .home-editorial-track { min-width: 0; }
.home-proposal .home-discovery-button { display: block; width: 100%; text-align: center; }
/* Astroの追加指定：スマホ用を集約。基礎CSSより後で適用する。 */
@media (max-width: 760px) {
 .registration-address-row,.store-search-fields{grid-template-columns:minmax(0,1fr)}
 .registration-address-row .registration-area{grid-template-columns:minmax(0,1fr)}
  .home-proposal > .home-left { display: none; }
  .home-proposal-main > .home-banners { min-width: 0; margin-inline: -16px; padding: 0; }
  .home-proposal-main > .home-banners .banner-slides { border-radius: 0; }
  .home-proposal-picks > .heading-section { display: none; }
  .home-proposal .home-compose,
  .home-proposal .home-store-search,
  .home-proposal .home-proposal-picks,
  .home-proposal .home-discover,
  .home-proposal-main > .home-side-section { padding: 20px 16px; }
  .home-proposal .home-compose { grid-template-columns: 1fr; }
  .home-kind-choices { gap: 8px; }
  .home-kind-choices :is(button, a) { min-height: 64px; padding: 10px; justify-items: center; text-align: center; }
  .home-kind-choices strong { font-size: 16px; }
  .home-kind-choices span { display: none; }
  .home-proposal-featured { grid-template-columns: 1fr; gap: 24px; }
  /* スマホの編集カード：各6件を横スクロールし、画像・イベント面を16:9に固定する。 */
  .home-right, .home-side-section { min-width: 0; }
  .home-editorial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .home-editorial-track::-webkit-scrollbar { display: none; }
  .home-editorial-track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  .home-side-section .home-editorial-track .home-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    scroll-snap-align: start;
  }
  .home-side-section .home-editorial-track .home-card > :is(img, .event-cover) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 5px;
    margin: 0 0 12px;
  }
  .home-side-section .home-editorial-track .heading-item { margin: 0 0 8px; font-size: 15px; }
  .home-side-section .home-editorial-track .home-card > :is(span, .article-summary, .event-meta, .event-venue) { display: none; }
  .home-side-section .home-editorial-track .home-editorial-date { margin: 0; font-size: 13px; }
  .home-proposal-main { gap: 0; }
  .home-proposal .home-compose {
    margin: 20px 0 0;
    padding: 16px 16px 16px;
    gap: 12px;
    border-top:none;
    border-radius: 5px;
    background:#f7f7f7;
  }
  .home-proposal .home-compose-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .home-proposal .home-compose-identity .profile-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
  .home-proposal .home-compose-identity .profile-fallback svg { width: 26px; height: 26px; }
  .home-proposal .home-compose-identity strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px;font-weight:400; line-height: 1.4; }
  .home-proposal .home-compose .heading-page { margin: 0; font-size: 18px; line-height: 1.4; }
  .home-proposal .home-kind-choices :is(button, a) { min-height: 45px; padding: 4px; }
  .home-proposal .home-kind-choices strong { font-size: 14px; line-height: 1.4; }
  .home-proposal .home-store-search {
    margin-top: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
  }
  .home-proposal .home-store-search > .heading-section { margin-bottom: 12px; }
  .home-proposal :is(.home-store-search, .home-proposal-editorial, .home-discover, .home-proposal-main > .home-side-section) .heading-section { font-size: 16px; line-height: 1.4; }
  .home-proposal-editorial {
    gap: 0;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
  }
  .home-proposal-editorial .home-side-section + .home-side-section { margin-top: 24px; padding-top: 24px; }
  .home-proposal-editorial .home-editorial-track .heading-item { font-size: 13px; font-weight:500; line-height: 1.5; }
  .home-proposal-editorial .home-side-section .home-editorial-track .home-editorial-date { font-size: 12px; line-height: 1.5; }
  .home-proposal .home-discover {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
  }
  .home-proposal .home-discover .home-discovery-grid .heading-item { margin: 8px 0; font-size: 14px; line-height: 1.5; }
  .home-proposal .home-discover .record-excerpt { font-size: 14px; line-height: 1.55; }
  .home-proposal .home-discover .home-discovery-button { font-size: 14px; line-height: 1.5; }
  .home-proposal-main > .home-side-section {
    padding: 24px 0 0;
    border-radius: 0;
    background: transparent;
  }
  .home-proposal .home-proposal-picks { order: -1; padding: 0; margin-inline: -16px; }
  .home-proposal-picks .home-banners .banner-slides { border-radius: 0; aspect-ratio: 16 / 9; }
  .home-proposal-picks .banner-track { gap: 0; }
  .home-proposal-picks .banner-slide { flex: 0 0 100%; width: 100%; height: 100%; }
  .home-proposal .home-store-search .store-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-proposal .home-store-search .store-search > input[type="search"],
  .home-proposal .home-store-search .store-search > button[type="submit"] { grid-column: 1 / -1; }
}

.share-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.share-button {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 6px;
  background: var(--color-inset, #f7f7f7);
  color: var(--color-text, #222);
  font: inherit;
  cursor: pointer;
}

.share-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.share-feedback {
  font-size: 13px;
}

.record-share {
  margin: 12px 0;
}

.profile-actions {
  flex-wrap: wrap;
}

.profile-name-row:has(+ .profile-account-id) .heading-section {
  margin-bottom: 2px;
}

.profile-account-id {
  margin: 0 0 12px;
  color: var(--color-muted, #777);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* PC profile: keep the identity and controls together, then let the bio use
   the full content width below them. */
@media (min-width: 761px) {
  body[data-page-layout] .profile-summary {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 24px;
    row-gap: 0;
  }

  .profile-summary > .profile-avatar {
    grid-column: 1;
    grid-row: 1 / 5;
  }

  .profile-summary > .profile-copy {
    display: contents;
  }

  .profile-summary .profile-name-row {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-summary .profile-account-id {
    grid-column: 2;
    grid-row: 2;
  }

  .profile-summary > .profile-actions {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
    max-width: min(65vw, 1000px);
  }

  .profile-summary .profile-bio,
  .profile-summary .profile-social-links {
    grid-column: 2 / -1;
    min-width: 0;
  }

  .profile-summary .profile-bio {
    grid-row: 3;
  }

  .profile-summary .profile-social-links {
    grid-row: 4;
  }
}

@media (max-width: 760px) {
  body[data-page-layout] .profile-summary {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    column-gap: 16px;
    row-gap: 0;
  }

  .profile-summary > .profile-avatar {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }

  .profile-summary > .profile-copy {
    display: contents;
  }

  .profile-summary .profile-name-row {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-summary .profile-account-id {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
  }

  .profile-summary .profile-bio,
  .profile-summary .profile-social-links {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .profile-summary .profile-bio {
    grid-row: 3;
    margin: 20px 0 12px;
  }

  .profile-summary .profile-social-links {
    grid-row: 4;
  }

  .profile-summary > .profile-actions {
    grid-column: 1 / -1;
    grid-row: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding-top: 14px;
  }

  .profile-actions .share-control {
    display: block;
    min-width: 0;
  }

  .profile-actions a,
  .profile-actions .share-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-inset);
    color: var(--color-text);
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .profile-summary > .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* My Page: personal record reflection. */
.reflection-navigation-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mypage-reflection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.mypage-reflection-main,
.mypage-reflection-side { min-width: 0; }
.mypage-reflection-main { display: grid; gap: 20px; }
.mypage-reflection .panel { margin: 0; }
.reflection-heading,
.reflection-calendar-heading,
.reflection-record-meta {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.reflection-heading { margin-bottom: 18px; }
.reflection-heading .heading-section,
.reflection-featured .heading-section { margin: 0 0 4px; }
.reflection-heading .muted { margin: 0; }
.reflection-heading .button { flex: 0 0 auto; }
.reflection-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.reflection-stats > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
}
.reflection-stats span { font-size: 13px; color: var(--color-muted, #777); }
.reflection-stats strong { font-size: clamp(24px, 3vw, 36px); line-height: 1; }
.reflection-stats small { margin-left: 3px; font-size: 14px; font-weight: 500; }
.reflection-year-total { margin: 10px 0 0; font-size: 13px; }
.reflection-calendar {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
.reflection-calendar-heading { align-items: center; margin-bottom: 12px; }
.reflection-calendar-heading h3 { margin: 0; font-size: 18px; }
.reflection-calendar-heading nav { display: flex; gap: 6px; }
.reflection-calendar-heading nav a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
}
.reflection-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.reflection-weekday { padding: 5px 0 7px; color: var(--color-muted, #777); text-align: center; font-size: 12px; }
.reflection-calendar-day,
.reflection-calendar-empty {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 48px;
  padding: 8px 3px 14px;
  border: 1px solid #eee;
  margin-right: -1px;
  margin-bottom: -1px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.reflection-calendar-day.hasRecord { background: #fff7f6; font-weight: 700; }
.reflection-calendar-day.selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.reflection-calendar-day.future { color: #aaa; pointer-events: none; }
.reflection-calendar-day i {
  position: absolute;
  bottom: 7px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.reflection-calendar-day:not(.future):hover { background: #fcebe9; }
.reflection-calendar-help { margin: 12px 0 0; font-size: 12px; }
.reflection-kind-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.reflection-kind-tabs a {
  min-width: 70px;
  padding: 7px 12px;
  border-radius: 5px;
  background: #f4f4f4;
  color: inherit;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
}
.reflection-kind-tabs a[aria-current="page"] { background: var(--color-accent); color: #fff; font-weight: 700; }
.reflection-record-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.reflection-record-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.reflection-record-card:hover { border-color: var(--color-accent); }
.reflection-record-card > img,
.reflection-featured img,
.reflection-record-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f4f0eb;
}
.reflection-record-placeholder { display: grid; place-items: center; font-size: 34px; }
.reflection-record-copy { padding: 12px; }
.reflection-record-meta { align-items: center; color: var(--color-muted, #777); font-size: 12px; }
.reflection-record-meta > span { padding: 3px 7px; border-radius: 999px; background: #fff0ef; color: #bc3934; }
.reflection-record-copy h3 { margin: 7px 0; font-size: 15px; line-height: 1.45; }
.reflection-record-copy p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.reflection-record-copy small { display: inline-block; margin-top: 8px; color: var(--color-muted, #777); }
.reflection-empty { padding: 28px 8px; text-align: center; }
.reflection-empty p { margin: 0 0 10px; }
.reflection-featured a { display: grid; gap: 7px; margin-top: 14px; color: inherit; text-decoration: none; }
.reflection-featured img,
.reflection-featured .reflection-record-placeholder { border-radius: 5px; }
.reflection-featured strong { font-size: 17px; }
.reflection-featured > p { margin: 12px 0 0; font-size: 13px; }

@media (max-width: 1000px) {
  .mypage-reflection { grid-template-columns: minmax(0, 1fr); }
  .mypage-reflection-side { display: none; }
}

@media (max-width: 760px) {
  .mypage-reflection-main { gap: 12px; }
  .reflection-heading { flex-wrap: wrap; }
  .reflection-stats { gap: 6px; }
  .reflection-stats > div { padding: 12px 8px; }
  .reflection-stats span { font-size: 11px; }
  .reflection-stats strong { font-size: 25px; }
  .reflection-calendar { padding: 12px 8px; }
  .reflection-calendar-day,.reflection-calendar-empty { min-height: 42px; }
  .reflection-record-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
}

@media (max-width: 420px) {
  .reflection-record-grid { grid-template-columns: 1fr; }
  .reflection-record-card { display: grid; grid-template-columns: 112px minmax(0,1fr); }
  .reflection-record-card > img,.reflection-record-card > .reflection-record-placeholder { height: 100%; aspect-ratio: 1; }
}

.store-registrant { margin: -4px 0 20px; color: var(--color-muted); font-size: 13px; line-height: 1.6; }
.store-registrant a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* 認証ページ：Clerkの全ステップで共通。外側の汎用パネルを重ねない。 */
body.route-auth-form[data-page-layout="auth"] main > .topline {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
body.route-auth-form[data-page-layout="auth"] main > .layout {
  display: block;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
body.route-auth-form[data-page-layout="auth"] main > .layout > div {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}
.auth-form .cl-rootBox,
.auth-form .cl-cardBox {
  width: 100%;
  max-width: 100%;
}
.auth-form .cl-cardBox {
  box-shadow: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.auth-form .cl-card {
  padding: clamp(20px, 5vw, 32px);
  gap: 24px;
  box-shadow: none;
  border: 0;
  background: transparent;
}
.auth-form .cl-headerTitle { font-size: 22px; line-height: 1.5; }
.auth-form .cl-headerSubtitle { font-size: 14px; line-height: 1.7; }
.auth-form .cl-formField { gap: 8px; }
.auth-form .cl-formFieldLabel { font-size: 14px; margin: 0; }
.auth-form .cl-card .cl-form input.cl-formFieldInput {
  min-height: 48px;
  padding: 12px;
  font-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}
.auth-form .cl-formFieldInput:focus {
  border-color: var(--color-text);
  outline: 2px solid var(--color-text);
  outline-offset: -1px;
  box-shadow: none;
}
.auth-form .cl-formButtonPrimary {
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-surface);
  background: var(--color-accent);
  border: 0;
  box-shadow: none;
  text-transform: none;
}
.auth-form .cl-formButtonPrimary:hover { background: var(--color-accent-hover); }
.auth-form .cl-footer { background: transparent; }
.auth-form .cl-footerAction { flex-wrap: wrap; gap: 8px; }
.auth-form .cl-footerActionLink { color: var(--color-accent); }
.auth-form .auth-legal {
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
  text-align: center;
}
.auth-form .auth-legal a { text-underline-offset: 3px; }

.auth-form .cl-card .cl-otpCodeFieldInputs { gap: 8px; justify-content: center; }
.auth-form .cl-card .cl-otpCodeFieldInputs .cl-otpCodeFieldInput {
  width: clamp(32px, 8vw, 44px);
  min-width: 0;
  height: 48px;
  padding: 0;
  font-size: 20px;
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-muted);
  border-radius: 8px;
  box-shadow: none;
}
.auth-form .cl-card .cl-otpCodeFieldInputs .cl-otpCodeFieldInput[data-focus-within="true"] {
  border-color: var(--color-text);
  outline: 2px solid var(--color-text);
  outline-offset: -1px;
}
.auth-form .cl-card .cl-otpCodeFieldInputs .cl-otpCodeFieldInput[aria-invalid="true"] {
  border-color: var(--color-danger);
  outline-color: var(--color-danger);
}

/* ログインの目的と新着店舗：既存のカード・色を共用。 */
.auth-benefits { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.auth-benefits h2 { margin: 0 0 20px; font-size: 18px; line-height: 1.6; }
.auth-benefits dl { margin: 0; display: grid; gap: 16px; }
.auth-benefits dt { font-weight: 600; }
.auth-benefits dd { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: var(--color-muted); }
.auth-benefits > p { margin-top: 24px; font-size: 13px; line-height: 1.8; color: var(--color-muted); }
.home-proposal-editorial .home-editorial-track .home-card .new-store-cover { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 5px; overflow: hidden; background: var(--color-inset); }
.new-store-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-store-cover span { display: grid; height: 100%; place-items: center; color: var(--color-muted); font-size: 13px; }
.store-region-links { flex-wrap: wrap; gap: 8px 16px; margin-block: 20px; font-size: 14px; }

/* About */
.route-about main { padding-top: 24px; }
.about-page { color: var(--color-text); }
.about-page :is(h1, h2, h3, p) { margin-top: 0; }
.about-hero { display: grid; grid-template-columns: 1.04fr .96fr; min-height: 530px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); }
.about-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px, 5vw, 70px); }
.about-hero h1 { margin-bottom: 28px; font-size: clamp(32px, 3.7vw, 50px); font-weight: 600; letter-spacing: -.045em; line-height: 1.4; }
.about-lead { max-width: 470px; margin-bottom: 32px; font-size: 15px; line-height: 2.1; }
.about-primary-link, .about-secondary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.about-primary-link { color: var(--color-surface); background: var(--color-accent); }
.about-primary-link:hover { color: var(--color-surface); background: var(--color-accent-hover); }
.about-page :is(.about-primary-link, .about-secondary-link, .about-feature):focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
.about-primary-link span, .about-secondary-link span { font-size: 18px; font-weight: 400; }
.about-hero-art { position: relative; display: grid; place-items: center; min-height: 430px; overflow: hidden; border-left: 1px solid var(--color-border); background: var(--color-inset); }
.about-hero-art::before, .about-hero-art::after { content: ''; position: absolute; width: 145%; height: 1px; left: -20%; background: var(--color-border); transform: rotate(-27deg); }
.about-hero-art::before { top: 23%; }.about-hero-art::after { bottom: 22%; }
.about-art-plate { position: relative; display: grid; place-items: center; width: min(70%, 340px); aspect-ratio: 1; border: 16px solid var(--color-surface); border-radius: 50%; background: var(--color-border); transform: rotate(-13deg); }
.about-art-plate::before { content: ''; position: absolute; width: 66%; height: 64%; border-radius: 48% 52% 45% 55%; outline: 10px solid var(--color-surface); background: var(--color-accent); transform: rotate(22deg) translate(9px, 2px); }
.about-art-plate span { position: absolute; width: 42%; height: 41%; left: 16%; top: 26%; border-radius: 51% 49% 53% 47%; background: var(--color-surface); transform: rotate(-16deg); }
.about-art-note { position: absolute; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-text); font-size: 12px; letter-spacing: .12em; background: var(--color-surface); }
.about-art-note-one { top: 20%; left: 10%; transform: rotate(-12deg); }.about-art-note-two { right: 8%; top: 43%; transform: rotate(9deg); }.about-art-note-three { left: 15%; bottom: 14%; transform: rotate(7deg); }
.about-intro { padding: 112px 48px 120px; }
.about-intro > div { max-width: 720px; margin-inline: auto; }
.about-intro h2 { margin-bottom: 28px; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.55; }
.about-intro p { max-width: 660px; font-size: 15px; line-height: 2.15; }
.about-intro p:last-child { margin-bottom: 0; }
.about-explore { padding: 48px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-inset); }
.about-section-heading { margin-bottom: 28px; }
.about-section-heading h2 { margin-bottom: 0; font-size: clamp(24px, 2.5vw, 32px); font-weight: 600; letter-spacing: -.04em; }
.about-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-feature { display: flex; flex-direction: column; min-height: 355px; padding: 25px; border: 1px solid var(--color-border); border-radius: 5px; color: inherit; background: var(--color-surface); transition: border-color .2s ease; }
.about-feature:hover { border-color: var(--color-accent); }
.about-feature-mark { display: flex; align-items: flex-start; width: 108px; height: 125px; color: var(--color-accent); }
.about-feature-mark svg { display: block; width: 108px; height: 108px; }
.about-feature h3 { margin-bottom: 9px; font-size: 20px; font-weight: 600; }
.about-feature p { margin-bottom: 26px; color: var(--color-muted); font-size: 13px; line-height: 1.85; }
.about-feature-more { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--color-accent); font-size: 13px; font-weight: 600; }
.about-feature-more span { font-size: 17px; font-weight: 400; }
.about-closing { padding: 112px 24px 104px; text-align: center; }
.about-closing h2 { margin-bottom: 16px; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.04em; }
.about-closing > p { margin-bottom: 28px; color: var(--color-muted); font-size: 14px; }
.about-closing-links { display: flex; justify-content: center; gap: 12px; }
.about-secondary-link { border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-surface); }
.about-secondary-link:hover { background: var(--color-inset); }
@media (max-width: 720px) {
  .route-about main { padding-top: 12px; }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-copy { padding: 42px 26px 48px; }
  .about-hero h1 { margin-bottom: 22px; }
  .about-lead { font-size: 14px; }
  .about-hero-art { min-height: 310px; border-left: 0; border-top: 1px solid var(--color-border); }
  .about-art-plate { width: 220px; border-width: 11px; }
  .about-intro { padding: 76px 14px 84px; }
  .about-intro h2 { margin-bottom: 24px; }
  .about-intro p { font-size: 14px; }
  .about-explore { padding: 34px 16px 18px; }
  .about-section-heading { display: block; margin-bottom: 24px; }
  .about-feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .about-feature { min-height: 0; padding: 22px; }
  .about-feature-mark { width: 76px; height: 88px; }
  .about-feature-mark svg { width: 76px; height: 76px; }
  .about-feature p { margin-bottom: 20px; }
  .about-closing { padding: 84px 12px 76px; }
  .about-closing-links { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .about-feature { transition: none; } }

/* Teaser wireframe preview. Scoped so it does not affect the active site. */
.teaser-wf-body { margin: 0; color: #222; background: #f4f4f2; font-family: "Noto Sans JP", sans-serif; }
.teaser-wf { max-width: 1440px; margin: auto; background: #fff; }
.teaser-wf :is(h1, h2, h3, p) { margin-top: 0; }
.teaser-wf-preview { padding: 8px 24px; color: #fff; background: #303030; font-size: 11px; letter-spacing: .06em; text-align: center; }
.teaser-wf-header { display: flex; align-items: center; gap: 32px; min-height: 78px; padding: 0 clamp(24px, 5vw, 72px); border-bottom: 1px solid #d8d8d8; }
.teaser-wf-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 25px; font-weight: 800; letter-spacing: -.08em; }
.teaser-wf-wordmark span { max-width: 70px; font-size: 9px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.teaser-wf-header nav { display: flex; gap: 25px; margin-left: auto; }
.teaser-wf-header nav a { font-size: 12px; text-decoration: none; }
.teaser-wf-header-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 15px; border: 1px solid #222; font-size: 12px; font-weight: 700; text-decoration: none; }
.teaser-wf-header-cta span { font-size: 16px; }
.teaser-wf-hero { display: grid; grid-template-columns: 1.06fr .94fr; min-height: 625px; padding: 66px clamp(24px, 5vw, 72px) 78px; gap: 60px; align-items: center; }
.teaser-wf-eyebrow { margin-bottom: 22px; color: #616161; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.teaser-wf-hero h1 { margin-bottom: 28px; font-size: clamp(38px, 4.3vw, 62px); font-weight: 700; letter-spacing: -.06em; line-height: 1.35; }
.teaser-wf-lead { margin-bottom: 34px; font-size: 16px; line-height: 2; }
.teaser-wf-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 45px; min-width: 244px; padding: 16px 20px; color: #fff; background: #303030; font-size: 14px; font-weight: 700; text-decoration: none; }
.teaser-wf-button span { font-size: 19px; font-weight: 400; }
.teaser-wf-hero-note { margin: 14px 0 0; color: #666; font-size: 12px; }
.teaser-wf-hero-visual { position: relative; height: 455px; border: 1px solid #bbb; background: #e4e4e4; }
.teaser-wf-visual-main { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #555; background: repeating-linear-gradient(135deg, #e6e6e6 0, #e6e6e6 18px, #dedede 18px, #dedede 19px); text-align: center; }
.teaser-wf-visual-main span { font-size: 11px; }
.teaser-wf-visual-main strong { margin-top: 20px; font-size: 65px; font-weight: 800; letter-spacing: -.08em; line-height: .9; }
.teaser-wf-visual-small { position: absolute; display: grid; place-items: center; width: 43%; height: 29%; border: 1px solid #aaa; color: #555; background: #fafafa; font-size: 11px; box-shadow: 7px 7px 0 #c5c5c5; }
.teaser-wf-visual-small-one { right: -22px; top: -28px; transform: rotate(4deg); }
.teaser-wf-visual-small-two { left: -28px; bottom: -25px; transform: rotate(-4deg); }
.teaser-wf-section { padding: 90px clamp(24px, 5vw, 72px); border-top: 1px solid #ddd; }
.teaser-wf-section-head { max-width: 740px; margin-bottom: 38px; }
.teaser-wf-section-head h2, .teaser-wf-invite h2 { margin-bottom: 14px; font-size: clamp(29px, 3.2vw, 42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.45; }
.teaser-wf-section-head > p:last-child { color: #555; font-size: 14px; line-height: 1.8; }
.teaser-wf-ways { background: #f7f7f7; }
.teaser-wf-way-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.teaser-wf-way-card { min-width: 0; border: 1px solid #ccc; background: #fff; }
.teaser-wf-way-visual { display: grid; place-items: center; height: 174px; padding: 16px; border-bottom: 1px solid #ccc; color: #666; background: repeating-linear-gradient(135deg, #eee 0, #eee 16px, #e6e6e6 16px, #e6e6e6 17px); font-size: 11px; text-align: center; }
.teaser-wf-way-copy { padding: 22px 17px 28px; }
.teaser-wf-way-number { color: #777; font-size: 11px; }
.teaser-wf-way-copy h3 { margin: 10px 0 9px; font-size: 20px; }
.teaser-wf-way-copy p { margin-bottom: 0; color: #555; font-size: 12px; line-height: 1.75; }
.teaser-wf-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.teaser-wf-record-card { display: grid; grid-template-columns: .9fr 1.1fr; min-width: 0; border: 1px solid #bbb; }
.teaser-wf-record-visual { display: grid; place-items: center; min-height: 285px; padding: 18px; border-right: 1px solid #bbb; color: #666; background: repeating-linear-gradient(135deg, #eee 0, #eee 18px, #e6e6e6 18px, #e6e6e6 19px); font-size: 11px; text-align: center; }
.teaser-wf-record-copy { padding: 27px 24px; }
.teaser-wf-record-copy > span { color: #777; font-size: 11px; letter-spacing: .1em; }
.teaser-wf-record-copy h3 { margin: 19px 0 14px; font-size: clamp(20px, 2vw, 26px); line-height: 1.5; }
.teaser-wf-record-copy p { margin-bottom: 0; color: #555; font-size: 13px; line-height: 1.85; }
.teaser-wf-journey { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: center; gap: 14px; }
.teaser-wf-journey > div { min-height: 134px; padding: 20px; border: 1px solid #ccc; background: #fafafa; }
.teaser-wf-journey > div span { display: block; margin-bottom: 10px; color: #777; font-size: 11px; }
.teaser-wf-journey strong { display: block; margin-bottom: 8px; font-size: 16px; }
.teaser-wf-journey small { color: #666; font-size: 12px; }
.teaser-wf-journey-arrow { color: #777; text-align: center; }
.teaser-wf-screen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.teaser-wf-screen-row > div { display: grid; place-items: center; min-height: 310px; border: 1px solid #bbb; color: #666; background: repeating-linear-gradient(135deg, #eee 0, #eee 20px, #e6e6e6 20px, #e6e6e6 21px); font-size: 12px; }
.teaser-wf-store-contribution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); align-items: center; gap: 8%; }
.teaser-wf-store-contribution h2 { margin-bottom: 24px; font-size: clamp(29px, 3.2vw, 42px); letter-spacing: -.045em; line-height: 1.45; }
.teaser-wf-store-contribution-copy > p:not(.teaser-wf-eyebrow) { max-width: 620px; margin-bottom: 14px; color: #555; font-size: 14px; line-height: 1.9; }
.teaser-wf-store-contribution-copy strong { color: #222; }
.teaser-wf-store-example { border: 1px solid #aaa; background: #fff; box-shadow: 9px 9px 0 #ddd; }
.teaser-wf-store-example-image { display: grid; place-items: center; min-height: 185px; border-bottom: 1px solid #bbb; color: #666; background: repeating-linear-gradient(135deg, #eee 0, #eee 18px, #e6e6e6 18px, #e6e6e6 19px); font-size: 11px; }
.teaser-wf-store-example-content { display: flex; flex-direction: column; padding: 24px; }
.teaser-wf-store-example-content > small { margin-bottom: 12px; color: #666; font-size: 10px; letter-spacing: .08em; }
.teaser-wf-store-example-content > strong { margin-bottom: 6px; font-size: 23px; }
.teaser-wf-store-example-content > span { color: #666; font-size: 12px; }
.teaser-wf-store-example-registrant { display: flex; align-items: center; gap: 20px; margin-top: 25px; padding-top: 17px; border-top: 1px solid #ddd; font-size: 12px; }
.teaser-wf-store-example-registrant > span { min-width: 48px; color: #666; }
.teaser-wf-store-example-registrant > b { border-bottom: 1px solid #555; font-weight: 700; }
.teaser-wf-invite { display: grid; grid-template-columns: 1fr 450px; gap: 8%; background: #ededed; }
.teaser-wf-invite-main > p:not(.teaser-wf-eyebrow) { max-width: 600px; font-size: 14px; line-height: 1.9; }
.teaser-wf-credit { max-width: 610px; margin-top: 38px; padding: 22px 0 0; border-top: 1px solid #bbb; }
.teaser-wf-credit strong { display: block; margin-bottom: 10px; font-size: 18px; }
.teaser-wf-credit p { margin-bottom: 0; color: #555; font-size: 13px; line-height: 1.9; }
.teaser-wf-form { padding: 28px; border: 1px solid #aaa; background: #fff; }
.teaser-wf-form-label { color: #777; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.teaser-wf-form h3 { margin: 12px 0; font-size: 24px; }
.teaser-wf-form > p:not(.teaser-wf-form-label) { color: #555; font-size: 12px; line-height: 1.8; }
.teaser-wf-faux-field { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font-size: 12px; font-weight: 700; }
.teaser-wf-faux-field span:last-child { min-height: 44px; padding: 11px 12px; border: 1px solid #aaa; color: #888; font-size: 12px; font-weight: 400; }
.teaser-wf-faux-button { display: flex; justify-content: space-between; margin-top: 23px; padding: 14px 15px; color: #fff; background: #777; font-size: 13px; font-weight: 700; }
.teaser-wf-form small { display: block; margin-top: 14px; color: #666; font-size: 11px; line-height: 1.6; }
.teaser-wf-faq { padding-bottom: 110px; }
.teaser-wf-faq-list { max-width: 860px; border-top: 1px solid #bbb; }
.teaser-wf-faq-list details { padding: 20px 4px; border-bottom: 1px solid #bbb; }
.teaser-wf-faq-list summary { font-size: 15px; font-weight: 700; }
.teaser-wf-faq-list p { max-width: 720px; margin: 16px 0 0; color: #555; font-size: 13px; line-height: 1.9; }
.teaser-wf-footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px clamp(24px, 5vw, 72px); border-top: 1px solid #ddd; color: #666; font-size: 11px; }
@media (max-width: 1000px) {
  .teaser-wf-way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-wf-record-card { grid-template-columns: 1fr; }
  .teaser-wf-record-visual { min-height: 180px; border-right: 0; border-bottom: 1px solid #bbb; }
  .teaser-wf-store-contribution { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 5%; }
  .teaser-wf-invite { grid-template-columns: 1fr 380px; gap: 5%; }
}
@media (max-width: 900px) {
  .teaser-wf-header nav { display: none; }
  .teaser-wf-header-cta { margin-left: auto; }
}
@media (max-width: 720px) {
  .teaser-wf-header { min-height: 65px; padding-inline: 20px; }
  .teaser-wf-header-cta { padding: 10px; font-size: 11px; }
  .teaser-wf-hero { grid-template-columns: 1fr; gap: 50px; min-height: 0; padding: 58px 24px 70px; }
  .teaser-wf-hero h1 { font-size: clamp(35px, 10vw, 52px); }
  .teaser-wf-lead { font-size: 14px; }
  .teaser-wf-hero-visual { height: 330px; margin: 0 15px; }
  .teaser-wf-visual-main strong { font-size: 50px; }
  .teaser-wf-section { padding: 70px 24px; }
  .teaser-wf-way-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser-wf-way-visual { height: 125px; }
  .teaser-wf-record-grid { grid-template-columns: 1fr; }
  .teaser-wf-record-card { grid-template-columns: .9fr 1.1fr; }
  .teaser-wf-record-visual { min-height: 225px; border-right: 1px solid #bbb; border-bottom: 0; }
  .teaser-wf-journey { grid-template-columns: 1fr; gap: 8px; }
  .teaser-wf-journey > div { min-height: 0; }
  .teaser-wf-journey-arrow { transform: rotate(90deg); }
  .teaser-wf-screen-row { grid-template-columns: 1fr; }
  .teaser-wf-screen-row > div { min-height: 230px; }
  .teaser-wf-store-contribution { grid-template-columns: 1fr; gap: 28px; }
  .teaser-wf-store-example-image { min-height: 155px; }
  .teaser-wf-invite { grid-template-columns: 1fr; gap: 34px; }
  .teaser-wf-faq { padding-bottom: 78px; }
  .teaser-wf-footer { flex-direction: column; padding: 28px 24px; }
}
@media (max-width: 420px) {
  .teaser-wf-way-grid { grid-template-columns: 1fr; }
  .teaser-wf-way-card { display: grid; grid-template-columns: 38% 62%; }
  .teaser-wf-way-visual { height: 100%; min-height: 145px; border-right: 1px solid #ccc; border-bottom: 0; }
  .teaser-wf-way-copy { padding: 17px 15px; }
  .teaser-wf-record-card { grid-template-columns: 1fr; }
  .teaser-wf-record-visual { min-height: 155px; border-right: 0; border-bottom: 1px solid #bbb; }
  .teaser-wf-header-cta { max-width: 145px; line-height: 1.3; }
}

/* Five local teaser design studies. All colors come from the active MCC tokens. */
.td-body, .td-gallery-body { margin: 0; font-family: "Noto Sans JP", sans-serif; color: var(--color-text); background: var(--color-bg); }
.td-page { --td-red: var(--color-accent); --td-ink: var(--color-text); --td-paper: var(--color-surface); --td-soft: var(--color-inset); --td-line: var(--color-border); max-width: 1600px; margin: auto; overflow: hidden; background: var(--td-paper); }
.td-page *, .td-gallery * { box-sizing: border-box; }
.td-page :is(h1,h2,h3,p), .td-gallery :is(h1,h2,p) { margin-top: 0; }
.td-preview { display: flex; justify-content: space-between; gap: 16px; padding: 9px clamp(20px,4vw,64px); color: #fff; background: var(--color-text); font-size: 11px; letter-spacing: .05em; }
.td-preview a { color: inherit; text-decoration: none; }
.td-preview a:hover { text-decoration: underline; }
.td-header { display: flex; align-items: center; gap: 30px; min-height: 82px; padding: 12px clamp(20px,4vw,64px); border-bottom: 1px solid var(--td-line); background: var(--td-paper); }
.td-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--td-red); font-size: 33px; font-weight: 900; letter-spacing: -.11em; line-height: 1; text-decoration: none; }
.td-logo span { font-size: 9px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.td-header nav { display: flex; gap: clamp(15px,2.7vw,36px); margin-left: auto; }
.td-header nav a { font-size: 12px; font-weight: 700; text-decoration: none; }
.td-header nav a:hover { color: var(--td-red); }
.td-header-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; border-radius: 4px; color: #fff; background: var(--td-red); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.td-header-cta:hover, .td-button:hover { background: var(--color-accent-hover); }
.td-hero { position: relative; display: grid; grid-template-columns: 52% 48%; min-height: 660px; background: var(--td-paper); }
.td-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 85px 7% 95px 8%; }
.td-kicker { margin-bottom: 24px; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.td-kicker span { color: var(--td-red); padding: 0 8px; }
.td-hero h1 { margin-bottom: 28px; font-size: clamp(40px,4.8vw,77px); font-weight: 900; line-height: 1.32; letter-spacing: -.085em; }
.td-hero h1 span { display: inline-block; white-space: nowrap; }
.td-hero h1 em { color: var(--td-red); font-style: normal; }
.td-hero-lead { margin-bottom: 28px; font-size: 15px; line-height: 2.05; }
.td-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; min-width: 254px; padding: 17px 20px; border-radius: 4px; color: #fff; background: var(--td-red); font-size: 14px; font-weight: 800; text-decoration: none; }
.td-button span { font-size: 19px; }
.td-hero-copy > small { margin-top: 13px; color: var(--color-muted); font-size: 11px; }
.td-hero-art { position: relative; min-width: 0; overflow: hidden; background: var(--td-red); }
.td-photo { position: absolute; overflow: hidden; }
.td-photo img, .td-record-photo img, .td-store-image img, .td-gallery-thumb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.td-photo-one { inset: 0 48% 0 0; }
.td-photo-two { inset: 0 0 50% 52%; }
.td-photo-three { inset: 52% 0 0 52%; }
.td-photo-two img { object-position: 24% center; }
.td-photo-three img { object-position: 68% center; }
.td-hero-mark { position: absolute; z-index: 1; top: 7%; left: 3%; display: flex; flex-direction: column; justify-content: center; width: 235px; aspect-ratio: 1; padding-left: 28px; border-radius: 50%; color: white; background: var(--td-red); font-size: 41px; font-weight: 900; line-height: .97; letter-spacing: -.07em; transform: rotate(-11deg); }
.td-hero-mark span { position: absolute; right: 30px; bottom: 35px; font-size: 43px; }
.td-hero-stamp { position: absolute; right: 7%; bottom: 8%; display: grid; place-items: center; width: 116px; aspect-ratio: 1; border-radius: 50%; color: var(--td-red); background: #fff; font-size: 15px; font-weight: 900; line-height: 1.08; text-align: center; transform: rotate(12deg); }
.td-hero-index { position: absolute; z-index: 3; left: 4%; bottom: 22px; color: var(--color-muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.td-ticker { display: flex; align-items: center; gap: 26px; overflow: hidden; padding: 16px 0; color: #fff; background: var(--td-red); white-space: nowrap; font-size: clamp(23px,3vw,43px); font-weight: 900; line-height: 1; letter-spacing: -.05em; }
.td-ticker span { flex: 0 0 auto; }
.td-ticker b { font-size: .7em; }
.td-section { padding: 110px clamp(24px,6vw,90px); }
.td-section-heading { max-width: 870px; margin-bottom: 42px; }
.td-section-heading h2, .td-store h2, .td-join h2 { margin-bottom: 22px; font-size: clamp(34px,4vw,61px); font-weight: 900; line-height: 1.35; letter-spacing: -.065em; }
.td-section-heading > p:last-child, .td-store-copy > p:not(.td-kicker), .td-join-copy > p:not(.td-kicker) { max-width: 690px; margin-bottom: 0; font-size: 15px; line-height: 1.95; }
.td-explore { background: var(--td-soft); }
.td-way-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.td-way { display: flex; flex-direction: column; min-height: 300px; padding: 23px; border: 1px solid var(--td-line); border-radius: 5px; background: var(--td-paper); }
.td-way-top { display: flex; justify-content: space-between; color: var(--color-muted); font-size: 12px; font-weight: 800; }
.td-way-top span:last-child { color: var(--td-red); font-size: 20px; }
.td-way-icon { width: 75px; height: 75px; margin: 27px 0 24px; color: var(--td-red); }
.td-way-icon svg { width: 100%; height: 100%; }
.td-way h3 { margin-bottom: 10px; font-size: clamp(18px,1.7vw,24px); letter-spacing: -.045em; }
.td-way p { margin-bottom: 0; color: var(--color-muted); font-size: 12px; line-height: 1.8; }
.td-records { color: #fff; background: var(--td-red); }
.td-records .td-section-heading { max-width: 960px; }
.td-record-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.td-record { min-width: 0; overflow: hidden; border-radius: 5px; color: var(--td-ink); background: #fff; }
.td-record-photo { position: relative; height: 285px; overflow: hidden; }
.td-record-photo span { position: absolute; bottom: -17px; left: 18px; color: #fff; font-size: clamp(65px,7.5vw,120px); font-weight: 900; line-height: 1; letter-spacing: -.1em; text-shadow: 0 2px 9px #2225; }
.td-record-text { padding: 32px 36px 42px; }
.td-record-text small { color: var(--td-red); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.td-record-text h3 { margin: 16px 0; font-size: clamp(25px,2.7vw,40px); line-height: 1.4; letter-spacing: -.055em; }
.td-record-text p { max-width: 530px; margin-bottom: 0; font-size: 13px; line-height: 1.9; }
.td-flow { background: var(--td-paper); }
.td-flow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.td-flow-grid > div { display: flex; flex-direction: column; min-height: 220px; padding: 27px; border-top: 3px solid var(--td-red); background: var(--td-soft); }
.td-flow-grid span { margin-bottom: auto; color: var(--td-red); font-size: 35px; font-weight: 900; }
.td-flow-grid strong { margin-bottom: 9px; font-size: 20px; }
.td-flow-grid small { color: var(--color-muted); font-size: 12px; }
.td-store { display: grid; grid-template-columns: 1fr minmax(330px,.83fr); align-items: center; gap: 8%; background: var(--td-soft); }
.td-store-copy > p:not(.td-kicker) { margin: 0 0 15px; }
.td-store-copy strong { color: var(--td-red); }
.td-store-card { overflow: hidden; border: 1px solid var(--td-line); border-radius: 5px; background: #fff; }
.td-store-image { position: relative; height: 260px; overflow: hidden; }
.td-store-image span { position: absolute; top: 18px; left: 18px; padding: 10px 14px; border-radius: 3px; color: #fff; background: var(--td-red); font-size: 13px; font-weight: 900; transform: rotate(-8deg); }
.td-store-card-body { display: flex; flex-direction: column; padding: 27px; }
.td-store-card-body > small { margin-bottom: 12px; color: var(--color-muted); font-size: 11px; }
.td-store-card-body > strong { margin-bottom: 7px; font-size: 26px; }
.td-store-card-body > span { color: var(--color-muted); font-size: 12px; }
.td-store-card-body > div { display: flex; gap: 22px; margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--td-line); font-size: 13px; }
.td-store-card-body > div span { color: var(--color-muted); }
.td-store-card-body > div b { border-bottom: 1px solid var(--td-red); color: var(--td-red); }
.td-join { display: grid; grid-template-columns: 1fr minmax(330px,.72fr); gap: 8%; background: var(--td-paper); }
.td-credit { margin-top: 40px; padding-top: 24px; border-top: 3px solid var(--td-red); }
.td-credit strong { display: block; margin-bottom: 10px; font-size: 21px; }
.td-credit p { max-width: 600px; margin-bottom: 0; font-size: 13px; line-height: 1.9; }
.td-form { align-self: start; padding: 30px; border-radius: 5px; background: var(--td-soft); }
.td-form > small:first-child { color: var(--td-red); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.td-form h3 { margin: 14px 0; font-size: 26px; letter-spacing: -.05em; }
.td-form > p { color: var(--color-muted); font-size: 12px; line-height: 1.8; }
.td-form > div { display: flex; flex-direction: column; gap: 8px; margin: 15px 0; font-size: 12px; font-weight: 800; }
.td-form > div span:last-child { padding: 12px; border: 1px solid var(--td-line); border-radius: 4px; color: var(--color-muted); background: #fff; font-weight: 400; }
.td-faux-button { display: flex; justify-content: space-between; padding: 15px 17px; border-radius: 4px; color: #fff; background: var(--td-red); font-size: 13px; font-weight: 900; }
.td-form > small:last-child { display: block; margin-top: 13px; color: var(--color-muted); font-size: 11px; line-height: 1.65; }
.td-faq { padding-bottom: 125px; background: var(--td-soft); }
.td-faq-list { max-width: 950px; border-top: 1px solid var(--td-line); }
.td-faq details { padding: 24px 5px; border-bottom: 1px solid var(--td-line); }
.td-faq summary { font-size: 16px; font-weight: 800; }
.td-faq details p { max-width: 740px; margin: 18px 0 0; color: var(--color-muted); font-size: 13px; line-height: 1.9; }
.td-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 38px clamp(24px,6vw,90px); color: #fff; background: var(--td-ink); font-size: 12px; }
.td-footer > span:first-child { color: var(--td-red); font-size: 30px; font-weight: 900; letter-spacing: -.09em; }
.td-footer small { display: inline-block; font-size: 8px; line-height: 1; letter-spacing: 0; }
.td-footer a { color: white; }

/* 02: oversized festival poster typography and a central food disc. */
.td-poster .td-hero { display: block; min-height: 790px; color: #fff; background: var(--td-red); }
.td-poster .td-hero::before { content: 'CURRY CURRY CURRY'; position: absolute; top: 3%; left: -2%; width: 110%; overflow: hidden; color: #fff2; font-size: clamp(115px,21vw,330px); font-weight: 900; white-space: nowrap; letter-spacing: -.12em; line-height: 1; }
.td-poster .td-hero-copy { z-index: 3; align-items: center; min-height: 790px; padding: 85px 24px; text-align: center; }
.td-poster .td-hero h1 { max-width: 1100px; margin-bottom: 24px; font-size: clamp(48px,7.3vw,118px); line-height: 1.16; }
.td-poster .td-hero h1 em, .td-poster .td-kicker span { color: #fff; }
.td-poster .td-hero-lead { max-width: 600px; font-weight: 700; }
.td-poster .td-hero-copy > small { color: #fff; }
.td-poster .td-button { color: var(--td-red); background: #fff; }
.td-poster .td-button:hover { color: #fff; background: var(--td-ink); }
.td-poster .td-hero-art { position: absolute; inset: 0; background: transparent; }
.td-poster .td-photo-one { inset: auto 2% 3% auto; width: min(27vw,350px); height: min(27vw,350px); border: 12px solid white; border-radius: 50%; transform: rotate(12deg); }
.td-poster .td-photo-two { inset: 8% auto auto 2%; width: min(18vw,230px); height: min(18vw,230px); border: 8px solid white; border-radius: 50%; transform: rotate(-13deg); }
.td-poster .td-photo-three, .td-poster .td-hero-mark { display: none; }
.td-poster .td-hero-stamp { right: 10%; top: 5%; bottom: auto; color: var(--td-red); }
.td-poster .td-hero-index { color: white; }
.td-poster .td-ticker { color: var(--td-red); background: #fff; }
.td-poster .td-way { border: 2px solid var(--td-ink); border-radius: 0; }
.td-poster .td-way-icon { width: 95px; height: 95px; }
.td-poster .td-records { color: var(--td-ink); background: #fff; }
.td-poster .td-record { border: 3px solid var(--td-ink); border-radius: 0; }
.td-poster .td-flow-grid > div { border: 0; border-radius: 50% 50% 4px 4px; background: var(--td-red); color: #fff; }
.td-poster .td-flow-grid span, .td-poster .td-flow-grid small { color: #fff; }

/* 03: two strong sides for eating and making. */
.td-dual .td-hero { grid-template-columns: 48% 52%; }
.td-dual .td-hero-copy { padding-left: 6%; padding-right: 3%; }
.td-dual .td-hero h1 { font-size: clamp(38px,4.1vw,62px); }
.td-dual .td-hero-art { background: linear-gradient(90deg,var(--td-red) 0 50%,var(--td-ink) 50% 100%); }
.td-dual .td-photo-one { inset: 14% auto auto 4%; width: 50%; height: 55%; border: 9px solid #fff; border-radius: 50%; }
.td-dual .td-photo-two { inset: auto 4% 11% auto; width: 47%; height: 54%; border: 9px solid #fff; border-radius: 50%; }
.td-dual .td-photo-three { display: none; }
.td-dual .td-hero-mark { top: auto; bottom: 8%; left: 8%; width: 130px; padding-left: 15px; border: 2px solid #fff; background: transparent; font-size: 23px; transform: rotate(-14deg); }
.td-dual .td-hero-mark span { right: 12px; bottom: 18px; font-size: 23px; }
.td-dual .td-hero-stamp { top: 8%; right: 6%; bottom: auto; color: var(--td-ink); }
.td-dual .td-ticker { background: var(--td-ink); }
.td-dual .td-records { color: var(--td-ink); background: var(--td-soft); }
.td-dual .td-record:first-child { color: #fff; background: var(--td-red); }
.td-dual .td-record:last-child { color: #fff; background: var(--td-ink); }
.td-dual .td-record-text small { color: inherit; }
.td-dual .td-store { background: linear-gradient(90deg,var(--td-red) 0 50%,var(--td-soft) 50% 100%); }
.td-dual .td-store-copy { color: #fff; }
.td-dual .td-store-copy strong { color: #fff; text-decoration: underline; }

/* 04: notebook-like layout made from MCC surfaces and simple shapes. */
.td-scrapbook .td-hero { background: var(--td-soft); }
.td-scrapbook .td-hero-copy { padding-left: 7%; padding-right: 3%; }
.td-scrapbook .td-hero h1 { max-width: 700px; font-size: clamp(38px,4.1vw,62px); }
.td-scrapbook .td-hero-art { margin: 28px 28px 28px 0; border: 2px dashed var(--td-red); border-radius: 15px; background: #fff; }
.td-scrapbook .td-photo-one { inset: 10% auto auto 8%; width: 58%; height: 53%; border: 10px solid #fff; box-shadow: 0 0 0 1px var(--td-line); transform: rotate(-8deg); }
.td-scrapbook .td-photo-two { inset: auto 7% 11% auto; width: 48%; height: 45%; border: 10px solid #fff; box-shadow: 0 0 0 1px var(--td-line); transform: rotate(9deg); }
.td-scrapbook .td-photo-three { display: none; }
.td-scrapbook .td-hero-mark { top: 10%; right: 4%; left: auto; width: 150px; padding-left: 19px; font-size: 27px; transform: rotate(15deg); }
.td-scrapbook .td-hero-mark span { right: 17px; bottom: 21px; font-size: 27px; }
.td-scrapbook .td-hero-stamp { right: auto; left: 7%; bottom: 6%; border: 2px dashed var(--td-red); transform: rotate(-18deg); }
.td-scrapbook .td-ticker { color: var(--td-red); background: #fff; }
.td-scrapbook .td-way { border: 2px dashed var(--td-red); border-radius: 16px; }
.td-scrapbook .td-way:nth-child(odd) { transform: rotate(-1.5deg); }
.td-scrapbook .td-way:nth-child(even) { transform: rotate(1.5deg); }
.td-scrapbook .td-records { color: var(--td-ink); background: var(--td-soft); }
.td-scrapbook .td-record { border: 1px solid var(--td-line); box-shadow: 8px 8px 0 var(--td-red); }
.td-scrapbook .td-record:first-child { transform: rotate(-1deg); }
.td-scrapbook .td-record:last-child { transform: rotate(1deg); }
.td-scrapbook .td-flow-grid > div { border: 2px dashed var(--td-red); border-radius: 18px; background: #fff; }
.td-scrapbook .td-store-card { transform: rotate(2deg); box-shadow: 9px 9px 0 var(--td-red); }

/* 05: restrained editorial cover with full photographic hero. */
.td-magazine .td-hero { min-height: 760px; display: block; color: #fff; background: var(--td-ink); }
.td-magazine .td-hero-copy { z-index: 2; width: min(850px,75%); min-height: 760px; padding-left: 7%; }
.td-magazine .td-hero h1 { font-size: clamp(50px,6.3vw,100px); }
.td-magazine .td-hero h1 em { color: #fff; text-decoration: underline; text-decoration-color: var(--td-red); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.td-magazine .td-hero-copy > small { color: #fff; }
.td-magazine .td-hero-art { position: absolute; inset: 0; background: var(--td-ink); }
.td-magazine .td-hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#222e 5%,#222a 45%,#2222 100%); }
.td-magazine .td-photo-one { inset: 0; }
.td-magazine .td-photo-one img { object-position: center 56%; }
.td-magazine .td-photo-two, .td-magazine .td-photo-three, .td-magazine .td-hero-mark, .td-magazine .td-hero-stamp { display: none; }
.td-magazine .td-hero-index { color: #fff; }
.td-magazine .td-ticker { padding: 12px 0; font-size: clamp(18px,2vw,28px); }
.td-magazine .td-explore { background: #fff; }
.td-magazine .td-way { border: 0; border-top: 2px solid var(--td-red); border-radius: 0; background: var(--td-soft); }
.td-magazine .td-records { color: var(--td-ink); background: #fff; }
.td-magazine .td-record { border-radius: 0; background: var(--td-soft); }
.td-magazine .td-record-photo { height: 370px; }
.td-magazine .td-flow { color: #fff; background: var(--td-ink); }
.td-magazine .td-flow-grid > div { color: var(--td-ink); background: #fff; }

/* Gallery previews share the same content and link to complete pages. */
.td-gallery { max-width: 1600px; margin: auto; background: var(--color-surface); }
.td-gallery-header { display: flex; justify-content: space-between; gap: 15px; padding: 22px clamp(24px,6vw,90px); border-bottom: 1px solid var(--color-border); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.td-gallery-header a { text-decoration: none; }
.td-gallery-intro { padding: 80px clamp(24px,6vw,90px) 70px; }
.td-gallery-intro > p:first-child { color: var(--color-accent); font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.td-gallery-intro h1 { margin-bottom: 27px; font-size: clamp(46px,7vw,100px); line-height: 1.2; letter-spacing: -.09em; }
.td-gallery-intro h1 em { color: var(--color-accent); font-style: normal; }
.td-gallery-intro > p:last-child { max-width: 680px; font-size: 15px; line-height: 1.9; }
.td-gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding: 0 clamp(24px,6vw,90px) 110px; }
.td-gallery-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 5px; }
.td-gallery-card:last-child { grid-column: 1/-1; }
.td-gallery-thumb { position: relative; display: block; height: 330px; overflow: hidden; text-decoration: none; }
.td-gallery-thumb-label { position: absolute; z-index: 2; top: 23px; left: 27px; max-width: 60%; font-size: clamp(28px,3.2vw,52px); font-weight: 900; line-height: 1.05; letter-spacing: -.07em; }
.td-gallery-thumb-photo { position: absolute; inset: 0 0 0 48%; }
.td-gallery-thumb-mark { position: absolute; z-index: 2; bottom: 22px; left: 27px; font-size: 17px; font-weight: 900; letter-spacing: -.07em; }
.td-gallery-card-copy { padding: 25px 28px 30px; }
.td-gallery-card-copy > span { color: var(--color-accent); font-size: 12px; font-weight: 900; }
.td-gallery-card-copy h2 { margin: 11px 0 9px; font-size: 27px; letter-spacing: -.05em; }
.td-gallery-card-copy p { margin-bottom: 12px; font-size: 13px; line-height: 1.8; }
.td-gallery-card-copy small { display: block; min-height: 35px; color: var(--color-muted); font-size: 11px; line-height: 1.6; }
.td-gallery-card-copy a { display: inline-block; margin-top: 18px; padding-bottom: 5px; border-bottom: 2px solid var(--color-accent); color: var(--color-accent); font-size: 13px; font-weight: 900; text-decoration: none; }
.td-gallery-collage .td-gallery-thumb { color: #fff; background: var(--color-accent); }
.td-gallery-poster .td-gallery-thumb { color: #fff; background: var(--color-accent); }
.td-gallery-poster .td-gallery-thumb::before { content: 'CURRY CURRY'; position: absolute; top: 37%; left: -5%; color: #fff5; font-size: 140px; font-weight: 900; white-space: nowrap; line-height: 1; }
.td-gallery-poster .td-gallery-thumb-photo { inset: auto 4% 8% auto; width: 230px; height: 230px; border: 9px solid white; border-radius: 50%; overflow: hidden; }
.td-gallery-dual .td-gallery-thumb { color: #fff; background: linear-gradient(90deg,var(--color-accent) 0 50%,var(--color-text) 50% 100%); }
.td-gallery-dual .td-gallery-thumb-photo { inset: 10% 5% 10% auto; width: 38%; border: 8px solid #fff; border-radius: 50%; overflow: hidden; }
.td-gallery-scrapbook .td-gallery-thumb { margin: 16px; height: 298px; border: 2px dashed var(--color-accent); border-radius: 16px; color: var(--color-accent); background: #fff; }
.td-gallery-scrapbook .td-gallery-thumb-photo { inset: 8% 6% 8% auto; width: 38%; border: 8px solid #fff; box-shadow: 0 0 0 1px var(--color-border); transform: rotate(8deg); }
.td-gallery-magazine .td-gallery-thumb { color: #fff; background: var(--color-text); }
.td-gallery-magazine .td-gallery-thumb-photo { inset: 0; opacity: .45; }
.td-gallery-magazine .td-gallery-thumb-label { font-size: clamp(37px,5vw,76px); }
.td-gallery-footer { padding: 32px clamp(24px,6vw,90px); color: #fff; background: var(--color-text); font-size: 11px; }

@media (max-width: 1100px) {
  .td-header nav { display: none; }
  .td-header-cta { margin-left: auto; }
  .td-hero h1 { font-size: clamp(38px,5vw,61px); }
  .td-way-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .td-preview { font-size: 10px; }
  .td-header { min-height: 66px; }
  .td-logo { font-size: 27px; }
  .td-header-cta { padding: 11px; font-size: 10px; }
  .td-hero { display: flex; flex-direction: column; }
  .td-hero-copy { min-height: 520px; padding: 65px 24px; }
  .td-hero h1 { font-size: clamp(38px,8.4vw,63px); }
  .td-hero-lead { font-size: 13px; }
  .td-hero-art { min-height: 430px; }
  .td-hero-index { left: 24px; bottom: 14px; }
  .td-hero-mark { top: 7%; left: 4%; width: 170px; padding-left: 19px; font-size: 29px; }
  .td-hero-mark span { right: 18px; bottom: 22px; font-size: 27px; }
  .td-hero-stamp { width: 90px; font-size: 12px; }
  .td-section { padding: 74px 24px; }
  .td-section-heading h2, .td-store h2, .td-join h2 { font-size: clamp(31px,7vw,48px); }
  .td-record-grid, .td-store, .td-join { grid-template-columns: 1fr; }
  .td-flow-grid { grid-template-columns: 1fr; }
  .td-flow-grid > div { min-height: 130px; }
  .td-store { gap: 30px; }
  .td-join { gap: 35px; }
  .td-faq { padding-bottom: 85px; }
  .td-footer { flex-wrap: wrap; }
  .td-poster .td-hero, .td-poster .td-hero-copy { min-height: 790px; }
  .td-poster .td-hero-art { inset: 0; min-height: 0; }
  .td-poster .td-photo-one { width: 180px; height: 180px; }
  .td-poster .td-photo-two { width: 130px; height: 130px; }
  .td-poster .td-hero-stamp { top: 7%; }
  .td-dual .td-hero-art { min-height: 400px; }
  .td-dual .td-store { background: var(--td-red); }
  .td-scrapbook .td-hero-copy { padding-left: 24px; }
  .td-scrapbook .td-hero-art { margin: 0 24px 40px; }
  .td-magazine .td-hero, .td-magazine .td-hero-copy { min-height: 690px; }
  .td-magazine .td-hero-copy { width: 100%; }
  .td-magazine .td-hero h1 { font-size: clamp(45px,9vw,70px); }
  .td-gallery-grid { grid-template-columns: 1fr; }
  .td-gallery-card:last-child { grid-column: auto; }
}
@media (max-width: 470px) {
  .td-preview span { max-width: 190px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .td-hero-copy { min-height: 560px; }
  .td-hero h1 { font-size: clamp(27px,8vw,35px); }
  .td-dual .td-hero h1, .td-scrapbook .td-hero h1, .td-magazine .td-hero h1 { font-size: clamp(27px,8vw,35px); }
  .td-hero-lead br { display: none; }
  .td-way-grid { grid-template-columns: 1fr; }
  .td-way { min-height: 230px; }
  .td-way-icon { width: 56px; height: 56px; margin: 15px 0; }
  .td-record-photo { height: 225px; }
  .td-record-text { padding: 26px; }
  .td-store-image { height: 200px; }
  .td-store h2 { font-size: clamp(23px,6.3vw,29px); }
  .td-store-card-body > div { gap: 12px; font-size: 11px; }
  .td-form { padding: 24px; }
  .td-poster .td-hero h1 { font-size: clamp(29px,8vw,36px); }
  .td-poster .td-photo-one { width: 135px; height: 135px; }
  .td-poster .td-photo-two { width: 90px; height: 90px; }
  .td-scrapbook .td-hero-mark { width: 110px; padding-left: 10px; font-size: 21px; }
  .td-scrapbook .td-hero-stamp { width: 70px; font-size: 9px; }
  .td-gallery-thumb { height: 240px; }
  .td-gallery-scrapbook .td-gallery-thumb { height: 208px; }
  .td-gallery-thumb-label { font-size: 30px; }
  .td-gallery-poster .td-gallery-thumb-photo { width: 150px; height: 150px; }
  .td-gallery-header { flex-direction: column; align-items: flex-start; gap: 7px; }
}

/* Sensory base and compatibility.
 * Edit choices and the <=640px placement here. Native bar geometry/state is in
 * "Sensory final layout" below, after the form-specific rules it must override.
 * Mozilla declarations and flat-color fallbacks stay until Firefox validation.
 */
.record-sensory-fields .sensory-tastes,
.record-sensory-fields .sensory-options { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.record-sensory-fields legend { font-weight: 600; margin-bottom: 12px; }
.sensory-strength { grid-template-columns: 90px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.sensory-strength > button { min-height: 44px; padding: 8px 12px; }
.sensory-bar { display: grid; grid-template-columns: auto minmax(80px,1fr) auto auto; gap: 12px; align-items: center; }
.sensory-bar[hidden], .sensory-state[hidden] { display: none; }
.sensory-bar output { min-width: 44px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.sensory-track input[type="range"]::-moz-range-track { height: 6px; background: #d8dadd; border-radius: 5px; }
.sensory-track input[type="range"]::-moz-range-progress { height: 6px; background: var(--color-accent); }
.sensory-track input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid white; border-radius: 50%; background: var(--color-accent); }
.sensory-ticks { justify-content: space-between; margin-top: -6px; }
.sensory-chips { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 10px; margin: 12px 0; }
.sensory-chips label { position: relative; margin: 0; cursor: pointer; }
.sensory-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sensory-chips span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 5px; text-align: center; }
.sensory-chips input:checked + span { color: white; background: var(--color-accent); border-color: var(--color-accent); }
.sensory-chips input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.sensory-more { border-top: 1px solid var(--color-border); padding-top: 16px; }
@media (max-width: 640px) {
 .sensory-strength { grid-template-columns: minmax(80px,1fr) auto; gap: 8px; }
 .sensory-strength > button { grid-column: 2; grid-row: 1; }
 .sensory-state { grid-column: 1; }
 .sensory-bar { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
 .sensory-chips { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .sensory-strength .sensory-bar { grid-template-columns: auto minmax(80px,1fr) auto; }
 .sensory-strength .sensory-bar output { grid-column: 1 / -1; }
}

/* Visible bars remain interactive while the separate answer stays unsubmitted. */
.sensory-strength > button[hidden] { display: none; }
.sensory-strength[data-answered="false"] .sensory-bar output { color: var(--color-muted); }
.sensory-strength[data-answered="false"] input[type="range"]::-webkit-slider-thumb { background: #a8adb3; }
.sensory-strength[data-answered="false"] input[type="range"]::-moz-range-progress { background: #d8dadd; }
.sensory-strength[data-answered="false"] input[type="range"]::-moz-range-thumb { background: #a8adb3; }

/* Record form field headings: decorative dots, independent of required state. */
[data-journal-form] .journal-field-title,
[data-journal-form] .record-sensory-fields legend {
  color: var(--color-text);
  font-weight: 600;
}
[data-journal-form] .journal-field-title::before,
[data-journal-form] .record-sensory-fields legend::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: .15em;
}
[data-journal-form] .journal-field-note {
  font-weight: 400;
}

/* Tag suggestions: existing tags, with manual input retained. */
.journal-tags{position:relative}
.journal-tags>p{margin:8px 0}
.journal-tag-suggestions{border:1px solid var(--color-border,#ddd);border-radius:5px;padding:8px;margin:8px 0;background:var(--color-surface,#fff)}
.journal-tag-suggestions [role="listbox"]{display:flex;flex-wrap:wrap;gap:8px;max-height:240px;overflow-y:auto}
.journal-tag-suggestions [role="option"]{min-height:44px;padding:10px 14px;text-align:left}
.journal-tag-suggestions [aria-selected="true"]{outline:2px solid currentColor;outline-offset:-2px}
.journal-tag-suggestions>p{margin:8px 0 0}
/* Selected tags and the next free entry share one field. */
.journal-tag-field{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--color-border,#ddd);border-radius:5px;background:var(--color-surface,#fff)}
.journal-tag-field:focus-within{outline:2px solid var(--color-text,#333);outline-offset:2px}
.journal-tag-chips{display:contents}
.journal-tag-chip{display:inline-flex;align-items:center;gap:2px;padding-left:10px;border-radius:5px;background:var(--color-surface-muted,#f3f3f3);max-width:100%}
.journal-tag-chip>span{overflow-wrap:anywhere}
.journal-tag-chip>button{border:0;background:transparent;min-width:44px;min-height:44px;padding:8px;color:inherit}
.journal-tags .journal-tag-field>input[data-tag-entry][role="combobox"][autocomplete]{flex:1 1 130px;min-width:100px;width:auto;border:0;box-shadow:none;outline:none;padding:10px 6px;margin:0;background:transparent}

/* Keep mobile form text readable without iOS focus zoom; retain pinch zoom. */
@media (width <= 760px) {
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="image"]), textarea, select) {
    font-size: 16px;
  }
}

/* MCC-012: one form column and surface, independent of the older focused gutter. */
body[data-page-layout="form"] {--page-content-width:640px;}
body[data-page-layout="form"] :is([data-journal-form],[data-store-registration]) {
 width:100%;max-width:none;padding:var(--space-5);background:var(--color-surface);border-radius:5px;
}
body[data-page-layout="form"] .layout > div {padding:0;}
body[data-page-layout="form"] [data-registration-result] {padding:var(--space-5);margin-top:var(--space-5);}
body[data-page-layout="form"] .layout > div > .text-link {display:inline-flex;min-height:44px;align-items:center;margin:var(--space-4) var(--space-5) 0;}
body:is(.route-record-start,.route-store-register,.route-records) main > .topline .heading-page {
 font-size:26px;line-height:1.4;font-weight:500;
}
body:is(.route-record-start,.route-store-register,.route-records) main > .topline {margin-bottom:var(--space-5);}
:is([data-journal-form],[data-store-registration]) .heading-section {font-size:20px;line-height:1.5;font-weight:500;margin:0 0 var(--space-4);}
[data-journal-form] .heading-item {font-size:16px;line-height:1.5;font-weight:500;margin:0 0 var(--space-4);}
:is([data-journal-form],[data-store-registration]) label:not(:has(input[type="checkbox"],input[type="radio"])) {
 display:block;margin:0 0 var(--space-4);font-size:14px;font-weight:600;line-height:1.5;
}
:is([data-journal-form],[data-store-registration]) label > :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),textarea,select) {display:block;margin-top:var(--space-2);margin-bottom:0;font-weight:400;}
[data-journal-form] :is(.journal-field-title,.record-sensory-fields legend) {font-size:14px;font-weight:600;}
[data-journal-form] .journal-field-note {font-size:13px;}
body[data-page-layout="form"] :is([data-journal-form],[data-store-registration]) .panel {padding:0;border:0;border-radius:0;margin:0 0 var(--space-6);background:transparent;}
body[data-page-layout="form"] :is([data-journal-form],[data-store-registration]) .panel:last-child {margin-bottom:0;}
[data-journal-form] .journal-kind-tabs {margin:0 0 var(--space-5);}
[data-journal-form] .journal-kind-tabs button {font-size:16px;min-height:48px;}
[data-journal-form] .journal-input-heading {justify-content:flex-end;margin-bottom:var(--space-2);gap:var(--space-2);}
[data-journal-form] .journal-input-heading > label {margin:0;}
:is([data-journal-form],[data-store-registration]) input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="date"]):not([data-tag-entry]) {
 min-height:48px;padding:10px 12px;margin:var(--space-2) 0 0;font-size:16px;line-height:1.5;
}
[data-journal-form] .journal-input-heading input.journal-date[type="date"] {min-height:44px;height:44px;padding:var(--space-2) var(--space-1);margin:0;flex-basis:152px;}
[data-journal-form] textarea {min-height:112px;line-height:1.5;margin:var(--space-2) 0 0;font-size:16px;}
[data-journal-form] #journal-impression {min-height:160px;margin:0 0 var(--space-4);}
[data-journal-form] .dish {padding:0;margin:0;border:0;border-radius:0;}
[data-journal-form] .dish + .dish {margin-top:var(--space-6);}
[data-journal-form] .dish-name-row {display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;}
[data-journal-form] .dish-name-row > label[data-dish-name-label] {margin:0;}
[data-journal-form] .dish-name-field {margin-bottom:var(--space-4);}
[data-journal-form] textarea[data-dish-comment] {height:72px;min-height:72px;}
[data-journal-form] [data-remove-dish] {padding:var(--space-2) 0 var(--space-2) var(--space-2);font-size:13px;min-height:44px;}
[data-journal-form] [data-add-dish] {margin-top:var(--space-4);min-height:44px;}
[data-journal-form] .choices {gap:var(--space-2);}
/* Native choices keep equal vertical centres in either selected state. */
:is([data-journal-form] .choices,[data-store-registration] .store-choice-options) > label {
 display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin:0;
 padding:10px 12px;border-width:1px;box-sizing:border-box;font-size:14px;font-weight:400;line-height:21px;
}
:is([data-journal-form] .choices,[data-store-registration] .store-choice-options) > label > input {
 flex:none;width:18px;height:18px;margin:0;vertical-align:middle;
}
[data-journal-form] .actions {gap:var(--space-2);margin-top:var(--space-5);}
[data-journal-form] .actions button {min-height:48px;}
[data-journal-form] .journal-tags .journal-tag-field {gap:var(--space-2);}
[data-journal-form] .journal-tags .journal-tag-field > input[data-tag-entry][role="combobox"][autocomplete] {margin:0;}

/* Address steps share label and control baselines; the street remains a full row. */
[data-store-registration] .registration-address-row {grid-template-columns:minmax(0,1fr);gap:var(--space-4);}
[data-store-registration] .registration-area {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
[data-store-registration] .registration-area-field {display:grid;gap:var(--space-2);margin:0;font-size:14px;line-height:21px;}
[data-store-registration] .registration-area-field > span {margin:0;font-size:14px;font-weight:600;line-height:21px;}
[data-store-registration] .registration-area-field .filter-trigger {height:48px;min-height:48px;font-size:16px;font-weight:400;line-height:24px;padding:10px 12px;}
[data-store-registration] .registration-address-row > label {margin:0;}
[data-store-registration] label:not(:has(input[type="checkbox"],input[type="radio"])) > span {display:block;line-height:21px;}
[data-store-registration] .registration-address-row > label > input {margin-top:var(--space-2);}
[data-store-registration] textarea {font-size:16px;font-weight:400;line-height:1.5;}
body[data-page-layout="form"] [data-store-registration] input[type="date"][name="openedOn"] {height:48px;min-height:48px;font-size:16px;}
[data-store-registration] .panel > p {font-size:14px;line-height:1.6;margin:var(--space-4) 0;}
[data-store-registration] .panel > p:first-child {margin-top:0;}
[data-store-registration] [data-photo-rights] {display:flex;align-items:flex-start;gap:var(--space-2);min-height:44px;margin:0;padding:10px 0;font-size:14px;font-weight:400;line-height:24px;}
[data-store-registration] [data-photo-rights] > input {flex:none;width:18px;height:18px;margin:3px 0 0;}
[data-store-registration] .panel > button[type="submit"] {margin-top:var(--space-2);min-height:48px;}


@media (width <= 480px) {
 [data-store-registration] .registration-area {grid-template-columns:minmax(0,1fr);}
}

[data-journal-form] .panel > p {margin:4px 0 0;font-size:14px;line-height:1.6;}
/* Reduced headings keep native labels and group names available to assistive tools. */
body[data-page-layout="form"] [data-journal-form] .journal-main-label,
[data-journal-form] [data-dishes][data-count="1"] [data-dish-heading],
body[data-page-layout="form"] [data-journal-form] .journal-photo-pick > input[type="file"] {
 position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
[data-journal-form] .journal-photo-row {display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
[data-journal-form] label.journal-photo-pick {
 position:relative;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:8px 12px;
 border:1px solid var(--color-border);border-radius:5px;font-size:14px;font-weight:400;cursor:pointer;
}
body[data-page-layout="form"] [data-journal-form] .journal-photo-row > label.journal-photo-pick {margin:0;}
[data-journal-form] [data-store-picker] {background:var(--color-surface-muted,#f3f3f3);}
[data-journal-form] [data-store-picker]:hover {background:var(--color-border);}
[data-journal-form] [data-store-picker]:active {background:var(--color-border);}
[data-journal-form] .journal-photo-pick:has(input:focus-visible) {outline:2px solid var(--color-text);outline-offset:3px;}
@supports not selector(:has(*)) {
 [data-journal-form] .journal-photo-pick:focus-within {outline:2px solid var(--color-text);outline-offset:3px;}
}
[data-journal-form] .journal-photo-count {font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;}
[data-journal-form] [data-clear-photos] {min-height:44px;font-size:14px;}
[data-journal-form] .panel > .journal-photo-help {font-size:13px;line-height:1.6;margin:4px 0 0;}
[data-journal-form] .journal-photo-error:not(:empty) {padding:0;margin:8px 0 0;font-size:14px;line-height:1.6;}
[data-journal-form] .journal-visibility {border:0;padding:0;margin:0;min-width:0;}
[data-journal-form] .journal-visibility > legend {font-size:14px;font-weight:600;line-height:21px;margin-bottom:var(--space-2);}

/* Native disclosures: primary rows 56px, nested rows 44px; menu is outside main. */
main details {--disclosure-duration:240ms;}
main details > summary, :is([data-journal-form],[data-store-registration]) details > summary {
 display:flex;align-items:center;gap:var(--space-2);list-style:none;min-height:56px;
 margin:0;padding:var(--space-4) 0;font-size:16px;font-weight:500;line-height:1.5;
 cursor:pointer;transition:background-color 120ms;
}
main details > summary::-webkit-details-marker {display:none;}
main details > summary::marker {content:'';}
main details > summary::after {
 content:'';width:var(--space-2);height:var(--space-2);flex:none;margin:0 6px var(--space-1) auto;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(45deg);transform-origin:50% 50%;
 transition:transform var(--disclosure-duration) cubic-bezier(.2,0,0,1);
}
main details[data-target-open="true"] > summary::after,
main details[open]:not([data-target-open="false"]) > summary::after {transform:rotate(225deg);}
main details > summary:active {background:#f7f7f7;transition-duration:0s;}
main details .disclosure-body {display:flow-root;padding-bottom:var(--space-4);}
main details .disclosure-body > :first-child {margin-top:0;}
main details .disclosure-body > :last-child {margin-bottom:0;}
main details details > summary, :is([data-journal-form],[data-store-registration]) details details > summary {font-size:14px;min-height:44px;padding:10px 0;}
main details details > summary::after {margin-left:var(--space-1);}
:is([data-journal-form],[data-store-registration]) details {margin:0;padding:0;border:0;}
:is([data-journal-form],[data-store-registration]) details + details {border-top:1px solid var(--color-border);}
[data-journal-form] .journal-place, [data-journal-form] .record-sensory-fields,
[data-journal-form] .journal-cooking {border-block:1px solid var(--color-border);}
[data-store-registration] .store-extra-fields {border-block:1px solid var(--color-border);margin:var(--space-5) 0;}
[data-journal-form] .record-sensory-fields :is(.sensory-tastes,.sensory-options) {margin:var(--space-5) 0;padding:0;}
[data-journal-form] .record-sensory-fields legend {margin-bottom:var(--space-2);}
[data-journal-form] .sensory-chips {gap:var(--space-2);margin:0;}
[data-journal-form] .sensory-chips label {margin:0;}
[data-journal-form] .sensory-more {border-top:1px solid var(--color-border);}

/* Sensory final layout: edit the native bar geometry and answered/focus states here.
 * Kept after form-specific rules to retain the existing cascade. Base choices,
 * Mozilla compatibility and <=640px placement remain at "Sensory base and compatibility".
 * 4px rail, 18px visible / 28px native thumb, 44px input.
 */
.sensory-strength {
  display: block;
  padding: 8px 0 12px;
  border-bottom: 1px solid #ececee;
}
.sensory-strength-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.sensory-strength-heading > strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}
.sensory-strength-heading > output {
  min-width: 52px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sensory-strength[data-answered="false"] .sensory-strength-heading > output {
  color: var(--color-muted);
}
.sensory-strength-heading .sensory-clear > button {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  min-width: 44px;
  min-height: 44px;
  font-size: 13px;
  text-decoration: underline;
}
.sensory-strength-heading .sensory-clear {
  width: 44px;
  min-height: 44px;
  flex: none;
}
.sensory-strength .sensory-bar {
  display: block;
}
.sensory-track {
  position: relative;
  min-width: 0;
}
.sensory-rail {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 20px;
  height: 4px;
  border-radius: 2px;
  background: #d8dadd;
  pointer-events: none;
}
.sensory-rail > span {
  display: block;
  height: 100%;
  width: var(--sensory-progress);
  border-radius: inherit;
  background: var(--color-accent);
}
.sensory-strength[data-answered="false"] .sensory-rail > span {
  width: 0;
}
.sensory-track input[type="range"] {
  position: relative;
  z-index: 1;
  display: block;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  touch-action: pan-y;
  cursor: ew-resize;
  border-radius: 0;
}
.sensory-track input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: 0;
  border-radius: 5px;
}
.sensory-track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border: 5px solid transparent;
  border-radius: 50%;
  background: var(--color-accent);
  background-clip: padding-box;
  box-shadow: none;
}
.sensory-track input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
  border: 0;
}
.sensory-track input[type="range"]::-moz-range-progress {
  height: 4px;
  background: transparent;
}
.sensory-track input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 5px solid transparent;
  border-radius: 50%;
  background: var(--color-accent);
  background-clip: padding-box;
  box-shadow: none;
}
.sensory-strength[data-answered="false"] input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}
.sensory-strength[data-answered="false"] input[type="range"]::-moz-range-progress {
  background: transparent;
}
.sensory-strength[data-answered="false"] input[type="range"]::-webkit-slider-thumb {
  background: radial-gradient(circle,#fff 0 7px,#8a8f96 7px 9px,transparent 9px);
  background-clip: padding-box;
}
.sensory-strength[data-answered="false"] input[type="range"]::-moz-range-thumb {
  background: radial-gradient(circle,#fff 0 7px,#8a8f96 7px 9px,transparent 9px);
  background-clip: padding-box;
}
.sensory-track input[type="range"]:focus-visible {
  outline: none;
}
.sensory-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #fff,0 0 0 4px #222;
}
.sensory-track input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px #fff,0 0 0 4px #222;
}
.sensory-ticks {
  display: block;
  position: relative;
  height: 21px;
  margin: 0 14px;
  font-size: 13px;
  line-height: 21px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.sensory-ticks > span {
  position: absolute;
  top: 0;
  left: var(--sensory-step);
  transform: translateX(-50%);
}
.sensory-ticks > span.current {
  color: var(--color-text);
  font-weight: 600;
}
.sensory-ticks small {
  position: absolute;
  top: 0;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.sensory-edge-start {
  left: calc(100% + 6px);
}.sensory-edge-end {
  right: calc(100% + 6px);
}
.sensory-strength .sensory-guide {
  font-size: 13px;
  line-height: 1.6;
  margin: 4px 14px 0;
}
/* Viewing pages share type roles, retaining their existing content spacing. */
body:is(.route-list,.route-store-lists,.route-public,.route-mypage) main > .topline .heading-page {font-size:26px;line-height:1.4;font-weight:500;}
body:is(.route-list,.route-store-lists,.route-mypage) :is(.panel > .heading-section,.section-title > .heading-section) {font-size:20px;line-height:1.5;font-weight:500;}
@media (width <= 760px) {
 body[data-page-layout="form"] :is([data-journal-form],[data-store-registration]) {padding:0;background:transparent;border-radius:0;}
 body[data-page-layout="form"] .layout > div > .text-link {margin-inline:0;}
 body:is(.route-record-start,.route-store-register,.route-records,.route-list,.route-store-lists,.route-public,.route-mypage) main {padding-inline:16px;}
 body:is(.route-record-start,.route-store-register,.route-records,.route-list,.route-store-lists,.route-public,.route-mypage) main > .topline .heading-page {font-size:22px;}
 :is([data-journal-form],[data-store-registration]) .heading-section,
 body:is(.route-list,.route-store-lists,.route-mypage) :is(.panel > .heading-section,.section-title > .heading-section) {font-size:18px;}
}
@media (prefers-reduced-motion:reduce) {
 main details > summary, main details > summary::after {transition:none;}
}

/* MCC-017: Store photo and region links share the information panel. */
.store-overview > .store-hero {
  width: 100%;
  margin: 0 0 24px;
}
.store-area a {
  display: inline-block;
  padding-block: 4px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.store-area a:hover { color: var(--color-accent, #ff4d46); }
.store-area a:focus-visible {
  outline: 2px solid var(--color-accent, #ff4d46);
  outline-offset: 3px;
  border-radius: 2px;
}
.store-municipality-filter { overflow-wrap: anywhere; }

/* MCC-017 additional alignment: match panel edges and picker gutters. */
body[data-page-layout="form"] main > .topline { padding-inline: 0; }
.filter-dialog > .filter-body.municipality-grid { padding: 24px; }
.filter-dialog .municipality-grid {
  grid-auto-rows: minmax(min-content, max-content);
  align-content: start;
}
.filter-dialog .filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
}
.filter-dialog .filter-option > input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}
.filter-dialog .filter-option > span { min-width: 0; overflow-wrap: anywhere; }
.filter-dialog .municipality-grid .filter-option { height: auto; }
@media (width <= 760px) {
  .filter-dialog > .filter-body.municipality-grid { padding: 18px; }
}

/* MCC-024: display roles. Crop thumbnails only; never modify uploaded originals. */
.media-thumbnail,
.home-post-images img.media-thumbnail,
.compact-record .home-post-images img.media-thumbnail,
.reflection-record-card > .media-thumbnail,
.reflection-featured .media-thumbnail,
.home-side-section .home-card > .media-thumbnail,
.home-side-section .home-editorial-track .home-card > .media-thumbnail,
.home-proposal-editorial .home-editorial-track .home-card > .media-thumbnail {
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}
img.media-thumbnail,
.home-post-images img.media-thumbnail,
.compact-record .home-post-images img.media-thumbnail,
.home-side-section .home-card > .media-thumbnail,
.home-side-section .home-editorial-track .home-card > .media-thumbnail,
.home-proposal-editorial .home-editorial-track .home-card > .media-thumbnail {
  display: block;
  width: 100%;
}
.media-thumbnail > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.media-thumbnail-empty {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 5px;
  background: var(--color-inset, #ededed);
  color: var(--color-muted, #707070);
  font-size: 12px;
}
.home-side-section .home-card > .media-thumbnail-empty,
.home-side-section .home-editorial-track .home-card > .media-thumbnail-empty,
.home-proposal-editorial .home-editorial-track .home-card > .media-thumbnail-empty { display: grid; margin-bottom: 12px; }
/* Keep compact reflection thumbnails at 16:9 instead of stretching to copy height. */
@media (max-width: 420px) {
  .reflection-record-card > .media-thumbnail { align-self: start; }
}
/* Detail covers and record/dish/body photos show the entire original image. */
.photos .photo img.media-body-image,
.article-hero.media-body-image,
.article-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}
/* Date placeholders must shrink with the two-column event cards on small screens. */
.event-results .event-cover.media-thumbnail {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 12px;
}
.event-results .event-cover.media-thumbnail strong {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(12px, 2vw, 17px);
  line-height: 1.4;
}

/* MCC-037: persistent, reversible optional analytics choice. */
.analytics-consent{margin:24px auto;max-width:720px;padding:16px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}
.analytics-consent[hidden]{display:none}
.analytics-consent p{font-size:14px;line-height:1.6}
.analytics-consent>div{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.analytics-consent button{min-height:44px;padding:8px 16px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}

/* MCC-045: shared two-CTA header and full-height white navigation. */
.header .site-menu-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text); font: inherit; font-size: 12px; }
.header .header-actions { gap: 8px; }
.header .header-actions .nav-create { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 10px 14px; background: var(--color-accent); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.header .header-actions .nav-create:hover { background: var(--color-accent-hover); }
.site-menu-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: #fff; color: var(--color-text); overflow-y: auto; overscroll-behavior: contain; }
.site-menu-dialog::backdrop { background: #fff; }
.site-menu-top { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.site-menu-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; }
.site-menu-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px; }
.site-menu-ctas a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 8px; border-radius: 8px; background: var(--color-accent); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; }
.site-menu-ctas a:hover { background: var(--color-accent-hover); }
.site-menu-dialog nav { display: grid; gap: 0; border-top: 1px solid var(--color-border); padding: 20px 0; }
.site-menu-dialog nav a { display: block; padding: 12px 0; text-decoration: none; line-height: 1.5; }
.site-menu-primary a { font-size: 16px; font-weight: 700; }
#site-menu-dialog .site-menu-primary a[href="/"] { font-weight: 600; }
.site-menu-secondary a { font-size: 14px; font-weight: 400; }
.site-menu-dialog nav a:hover { color: var(--color-accent); }
.site-menu-dialog a:focus-visible, .header .site-menu-trigger:focus-visible, .site-menu-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (min-width: 768px) {
  .site-menu-dialog { max-width: 480px; left: auto; padding: 24px 32px 40px; }
  .site-menu-dialog::backdrop { background: rgb(0 0 0 / .25); }
}
@media (max-width: 1099px) {
  .header nav { display: none; }
  .header .site-menu-trigger { margin-left: auto; }
}
@media (max-width: 767px) {
  .header .header-actions .nav-create { display: none; }
}

/* MCC-049: optional public store suggestions under the place field. */
.journal-place-suggestions {border:1px solid var(--color-border,#ddd);border-radius:5px;margin:8px 0;background:var(--color-surface,#fff)}
.journal-place-suggestions [role="listbox"] {display:flex;flex-direction:column;max-height:288px;overflow-y:auto}
.journal-place-suggestions [role="option"] {min-height:44px;text-align:left;padding:10px 14px;border:0;border-radius:0;background:transparent}
.journal-place-suggestions [aria-selected="true"],.journal-place-suggestions [role="option"]:hover {background:var(--color-bg,#f4f4f4);outline:2px solid currentColor;outline-offset:-2px}

/* MCC-017: plain-text links only; preserve breaks and fit long URLs. */
.record-excerpt, .record-body {white-space:pre-wrap;overflow-wrap:anywhere;}
.record-body-link {text-decoration:underline;overflow-wrap:anywhere;}

/* MCC-017: access label and value only, regardless of omitted preceding fields. */
.store-info-row[data-store-field="access"] dt,
.store-info-row[data-store-field="access"] dd {font-size:14px;}

/* MCC-017: full-width related records, author-detail alignment and compact mypage tabs. */
.store-records > .home-grid {grid-template-columns:minmax(0,1fr);}
.record-detail-meta {flex-wrap:wrap;}
.record-detail-meta .home-record-author {min-width:0;max-width:100%;}
.record-detail-meta .home-record-author > span {min-width:0;overflow-wrap:anywhere;}
.record-detail-meta .record-preview-date {margin-left:auto;gap:8px;color:var(--color-muted);}
.reflection-kind-tabs {justify-content:flex-start;gap:4px;}
.reflection-kind-tabs a {flex:0 0 auto;min-width:0;}

.record-detail-meta .home-record-author > span:last-child {white-space:normal;overflow:visible;text-overflow:clip;}

/* MCC-051: safe rich editorial content; tables keep all columns on small screens. */
.article-body.article-body-rich { white-space: normal; min-width: 0; }
.article-body-rich :is(h1,h2,h3,h4,h5,h6) { line-height: 1.4; margin: 1.5em 0 .65em; overflow-wrap: anywhere; }
.article-body-rich h1 { font-size: 2em; }
.article-body-rich h2 { font-size: 1.6em; }
.article-body-rich h3 { font-size: 1.35em; }
.article-body-rich h4 { font-size: 1.15em; }
.article-body-rich :is(h5,h6) { font-size: 1em; }
.article-body-rich :is(p,ul,ol,blockquote,figure) { margin: 1em 0; }
.article-body-rich :is(ul,ol) { padding-inline-start: 1.5em; }
.article-body-rich a { text-decoration: underline; overflow-wrap: anywhere; }
.article-body-rich blockquote { padding-inline-start: 1em; border-inline-start: 3px solid currentColor; }
.article-body-rich figure img { max-width: 100%; height: auto; display: block; }
.article-body-rich figcaption { font-size: .875em; margin-top: .5em; }
.article-body-rich :is(.editorial-table-scroll,.editorial-html-block) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.article-body-rich table { border-collapse: collapse; width: max-content; min-width: 100%; }
.article-body-rich :is(th,td) { border: 1px solid #b8b8b8; padding: .65em .8em; min-width: 7rem; max-width: 28rem; vertical-align: top; }
.article-body-rich th { font-weight: 700; background: #f4f2ee; }
.article-body-rich pre { max-width: 100%; overflow-x: auto; white-space: pre; }

/* MCC-053: store detail information and public logs share one accessible tab row. */
.store-detail-header {margin-bottom:20px;}
.store-detail-header .store-primary-actions {margin-bottom:0;flex-wrap:wrap;}
.store-detail-tabs {display:flex;gap:24px;border-bottom:1px solid var(--color-border);margin:0 0 24px;}
.store-detail-tabs [role="tab"] {display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 4px;border-bottom:3px solid transparent;color:var(--color-muted);font-weight:600;text-decoration:none;}
.store-detail-tabs [aria-selected="true"] {color:var(--color-text);border-bottom-color:var(--color-accent);}
.store-detail-tabs [role="tab"]:focus-visible,.store-detail-panel:focus-visible {outline:2px solid var(--color-accent);outline-offset:4px;}
.store-tab-count {font-size:.75rem;font-weight:500;padding:2px 7px;border-radius:20px;background:var(--color-bg,#f4f4f4);color:var(--color-muted);}
.store-detail-panel[hidden] {display:none!important;}
.store-records-more {display:inline-block;margin-top:20px;}
@media(max-width:767px) {
 .store-detail-tabs {gap:0;}
 .store-detail-tabs [role="tab"] {flex:1;min-width:0;padding-inline:8px;}
 .store-detail-header .store-primary-actions {gap:8px;}
}

/* MCC-054: common post identity, content alignment and in-place text expansion. */
.post-card,.post-detail {--post-avatar-size:40px;--post-gap:12px;min-width:0;}
.post-header {display:flex;align-items:flex-start;gap:var(--post-gap,12px);min-width:0;margin-bottom:12px;}
.post-avatar {flex:0 0 var(--post-avatar-size,40px);display:block;}
.post-avatar .profile-avatar {width:var(--post-avatar-size,40px);height:var(--post-avatar-size,40px);margin:0;}
.post-identity {flex:1;min-width:0;}
.post-author {font-weight:700;line-height:1.5;overflow-wrap:anywhere;display:block;}
.post-meta {display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--color-muted,#666);font-size:12px;line-height:1.6;overflow-wrap:anywhere;}
.post-meta a {text-decoration:underline;}
.post-content {margin-inline-start:calc(var(--post-avatar-size,40px) + var(--post-gap,12px));min-width:0;}
.post-content .record-excerpt {display:block;-webkit-line-clamp:unset;max-height:none;overflow:visible;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;}
.post-text {position:relative;margin:12px 0;}
.post-text.is-collapsed .post-text-content {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height:6.8em;overflow:hidden;mask-image:linear-gradient(#000 65%,transparent);}
.post-text-toggle {display:block;min-height:44px;padding:4px 0;border:0;background:transparent;color:var(--color-accent,#a52d2a);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;}
.post-text-toggle[hidden] {display:none;}
.post-actions {position:relative;flex:0 0 auto;}
.post-actions summary {display:grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer;list-style:none;font-size:24px;line-height:1;}
.post-actions summary::-webkit-details-marker {display:none;}
.post-actions-menu {position:absolute;right:0;top:100%;z-index:5;width:min(270px,calc(100vw - 48px));padding:12px;border:1px solid var(--color-border,#ddd);background:var(--color-surface,#fff);box-shadow:0 4px 16px #0002;}
.post-actions-menu :is(a,button) {display:block;min-height:44px;text-align:left;}
.post-actions-menu p {font-size:12px;line-height:1.6;margin:8px 0 0;}
.post-content .home-post-images {margin-top:12px;}
.post-content .panel {min-width:0;}
.post-detail .post-content>.panel {padding-inline:0;border-inline:0;}
@media (max-width:540px) {.post-card,.post-detail {--post-avatar-size:32px;--post-gap:8px;}}

.reflection-record-grid:has(>.post-card) {grid-template-columns:minmax(0,1fr);}

/* MCC-048: registration-only selection controls; original image pixels are retained. */
[data-store-registration] .store-photo-preview {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
[data-store-registration] .store-photo-preview[hidden] {display:none;}
[data-store-registration] .store-photo-choice {position:relative;min-width:0;}
[data-store-registration] .store-photo-choice > img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px;}
[data-store-registration] .store-photo-choice > label {display:flex;align-items:center;gap:6px;min-height:44px;font-size:13px;}
[data-store-registration] .store-photo-choice input[type="radio"] {width:18px;height:18px;flex:none;}
[data-store-registration] .store-photo-remove {position:absolute;top:4px;right:4px;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;background:#fff;color:#222;border:1px solid #ccc;border-radius:5px;font-size:24px;line-height:1;}
[data-store-registration] .store-photo-choice:has(input:checked) > img {outline:2px solid var(--color-primary,#ff4d46);outline-offset:2px;}

/* MCC-056: authenticated service operations, scoped away from member pages. */
.route-operator .operator-nav,.route-operator .operator-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
.route-operator .operator-nav a{padding:8px 12px;border:1px solid var(--color-border);border-radius:5px;text-decoration:none}
.route-operator .operator-nav a[aria-current="page"]{background:var(--color-accent);color:white}
.route-operator .operator-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:24px 0}
.route-operator .operator-summary a{display:grid;gap:12px;text-decoration:none}
.route-operator .operator-summary strong{font-size:32px}.route-operator .operator-summary small{font-size:14px}
.route-operator .operator-queue{list-style:none;padding:0}.route-operator .operator-queue li,.route-operator .operator-audit{border-top:1px solid var(--color-border);padding:16px 0;overflow-wrap:anywhere}
.route-operator .operator-form{display:grid;gap:16px;margin:16px 0}.route-operator form label{display:block;margin:12px 0}
.route-operator input:not([type="hidden"]):not([type="checkbox"]),.route-operator select,.route-operator textarea{font-size:16px;max-width:100%;box-sizing:border-box}
.route-operator .panel{overflow-wrap:anywhere}.route-operator details{margin:20px 0}.route-operator dd{overflow-wrap:anywhere}

/* MCC-056 hostname supplement: only the authenticated admin surface. */
.operator-host .header{flex-wrap:wrap;gap:12px}
.operator-host .header nav{display:flex;flex-wrap:wrap;gap:12px}
.operator-host .operator-host-footer{max-width:1050px;margin:32px auto;padding:24px 16px;display:flex;flex-wrap:wrap;gap:12px}

/* MCC-048 owner QA: bound direct event preview images to the form gallery. */
[data-event-photo-preview]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px;min-width:0}
[data-event-photo-preview]>img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* MCC-060: the post action trigger is an ellipsis, with no disclosure chevron. */
main details.post-actions > summary {display:grid;padding:0;min-height:44px;}
main details.post-actions > summary::after {content:none;display:none;}

/* MCC-062: store listing photos and text keep separate responsive proportions. */
.route-stores .store {
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
}
.route-stores .store > div { min-width: 0; }
.route-stores .store .store-cover { width: 200px; aspect-ratio: 16 / 9; }
.route-stores .store .heading-section { margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.route-stores .store .store-address { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .route-stores .store { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 16px; padding-block: 20px; }
  .route-stores .store .store-cover { width: 96px; }
  .route-stores .store .heading-section { margin-bottom: 6px; }
}

/* MCC-064: space the next mobile post header from the preceding divider. */
@media (max-width:540px) {
  .post-card + .post-card > .post-header {padding-block-start:15px;}
}

/* MCC-061: publication date and a single-line news title. */
.editorial-news-list .home-news {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.editorial-news-list .home-news time {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.editorial-news-list .news-list-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MCC-063 operations notifications */
.notification-link { position: relative; }
.notification-count { position: absolute; top: -6px; right: -10px; min-width: 18px; padding: 1px 4px; border-radius: 12px; background: #a23a24; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.notice-preview .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.operator-form input, .operator-form textarea, .operator-form select { max-width: 100%; font-size: 16px; }