:root {
color-scheme:light
}
* {
box-sizing:border-box
}
body {
margin:0;
font-family:Verdana,Arial,sans-serif
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
outline:3px solid #d26900;
outline-offset:3px
}
nav {
padding:10px 0
}
button {
background:#176767;
color:#fff;
border:0;
padding:10px 18px;
cursor:pointer;
border-radius:3px
}
input,select {
font:inherit;
padding:8px;
border:1px solid #668383;
max-width:100%
}
label {
display:block;
margin:12px 0
}
label input,label select {
display:block;
margin-top:5px
}
.modern-page {
background:#399;
color:#233b3b
}
.modern-page header,.modern-page main {
max-width:900px;
margin:auto;
padding:24px;
background:#fff
}
.modern-page header {
background:#e7f3f3;
border-bottom:4px solid #699
}
.modern-page a {
color:#165e69
}
.modern-page article {
border-top:1px solid #b4cece;
padding:15px 0
}
.modern-page h2 {
font-size:1.2rem
}
.modern-page p,.modern-page li {
line-height:1.65;
overflow-wrap:anywhere
}
.modern-page main {
min-height:70vh
}
#sidebar1 form {
padding:8px
}
#sidebar1 input {
width:100%;
margin:8px 0
}
ul.MenuBarHorizontal li:hover>ul,ul.MenuBarHorizontal li:focus-within>ul {
left:0;
visibility:visible
}
ul.MenuBarHorizontal ul li:hover>ul,ul.MenuBarHorizontal ul li:focus-within>ul {
left:95%;
top:0
}
#mainContent {
height:auto!important;
min-height:371px
}
img {
max-width:100%
}
@media(max-width:820px) {
.twoColElsRtHdr #container {
width:100%!important
}
.twoColElsRtHdr #header {
overflow-x:auto
}
.twoColElsRtHdr #mainContent {
overflow-x:auto
}
.twoColElsRtHdr #sidebar1 {
height:auto!important
}
table {
max-width:100%
}
}
.modern-page input,.modern-page select,.modern-page button {
font-size:16px;
min-height:44px
}
.modern-page .food-search-form input,.modern-page .food-search-form select {
width:100%
}
.modern-page .food-search-form {
max-width:640px
}
.modern-page nav {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px
}
.modern-page nav a,.modern-page .food-result h2 a {
display:inline-block;
padding:10px 0;
min-height:44px
}
.phone-search-tile {
display:block;
padding:20px 12px;
background:#e7f3f3;
color:#165e69;
font-weight:bold;
text-align:center
}
.phone-search-promo {
line-height:1.5
}
.operator-tools {
max-width:1120px;
margin:22px auto 0;
padding:22px;
background:#eef4ea;
border:1px solid var(--line);
border-radius:14px;
display:grid;
grid-template-columns:minmax(220px,.85fr) minmax(0,2.2fr);
gap:22px;
align-items:start
}
.operator-tools-heading h2 {
font-size:1.45rem;
margin:0 0 8px
}
.operator-tools-heading p:not(.eyebrow) {
font-size:.9rem;
color:var(--muted);
margin:0 0 14px
}
.operator-tool-groups {
display:grid;
grid-template-columns:repeat(4,minmax(135px,1fr));
gap:18px
}
.operator-tool-groups section {
background:#fffdf8;
border:1px solid #dbe2d4;
border-radius:12px;
padding:14px
}
.operator-tool-groups h3 {
font-family:inherit;
font-size:.76rem;
letter-spacing:.12em;
text-transform:uppercase;
margin:0 0 10px;
color:var(--muted)
}
.operator-tool-groups ul {
list-style:disc;
margin:0;
padding-left:18px
}
.operator-tool-groups li {
font-size:.86rem;
line-height:1.35;
margin:8px 0
}
.operator-tool-groups a {
font-weight:700
}
.review-signout {
margin:0;
padding:0
}
@media(max-width:600px) {
.modern-page>header,.modern-page>main {
padding:16px
}
.modern-page h1 {
font-size:1.65rem
}
.modern-page .food-result {
padding:12px 0
}
.modern-page .food-search-form button {
width:100%
}
}
.site-brand {
font-size:2rem;
font-weight:bold;
text-decoration:none
}
.site-brand span {
font-weight:normal
}
.modern-page footer {
max-width:900px;
margin:auto;
padding:24px;
background:#e7f3f3
}
.search-modes a,.search-modes span {
border:1px solid #668383;
border-radius:4px;
padding:8px!important;
font-size:.9rem
}
.search-modes a[aria-current],.search-modes span[aria-current] {
background:#176767;
color:white
}
.skip-link {
position:absolute;
left:-10000px
}
.skip-link:focus {
left:8px;
top:8px;
background:white;
padding:12px;
z-index:100
}
.rules-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}
.modern-page .rule-card {
border:1px solid #b4cece;
border-radius:6px;
padding:16px;
background:#f6fbfb
}
.rule-category {
font-size:.8rem;
margin:0;
color:#456363
}
.rules-filter {
display:flex;
flex-wrap:wrap;
align-items:end;
gap:12px
}
.rules-filter label {
margin:0;
flex:1 1 180px
}
.rules-filter input,.rules-filter select {
width:100%
}
/* Keep the rules category control usable in WebKit's narrow layout. */
.modern-page .rules-filter select {
appearance:none;
height:48px;
padding-right:38px;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
background-size:6px 6px;
background-repeat:no-repeat
}
.rules-filter>a {
padding:12px
}
.rules-pagination {
justify-content:space-between
}
@media(max-width:600px) {
.rules-grid {
grid-template-columns:1fr
}
}
/* New placements remain visually separate from historical editorial content. */
.sponsor-placements {
max-width: 70rem;
margin: 1.5rem auto;
padding: 0 1rem;
}
.sponsor-card {
border: 1px solid #b5b5b5;
border-left: 4px solid #8a6200;
padding: 1rem;
margin: 1rem 0;
overflow-wrap: anywhere;
}
.sponsor-disclosure {
font-weight: bold;
}
.account-form textarea {
min-height: 8rem;
max-width: 100%;
font: inherit;
}
/* Shared responsive publication design. No external fonts or tracking assets. */
:root {
--ink:#193e38;
--muted:#5c6c63;
--paper:#faf8f2;
--line:#dbdfd4;
--green:#174d40;
--accent:#e9cb78
}
.modern-page {
background:var(--paper);
color:var(--ink);
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:16px;
line-height:1.6
}
.modern-page a {
color:var(--green);
text-underline-offset:4px
}
.modern-page a:hover {
color:#82610c
}
.modern-page h1,.modern-page h2,.modern-page h3 {
line-height:1.15;
letter-spacing:-.035em;
color:var(--ink)
}
.modern-page h1,.home-section h2,.contribute-panel h2 {
font-family:Georgia,"Times New Roman",serif;
font-weight:normal
}
.modern-page h1 {
font-size:clamp(2.2rem,5vw,3.8rem);
margin:.5rem 0 1.3rem
}
.modern-page h2 {
font-size:1.65rem;
margin:1rem 0
}
.modern-page h3 {
font-size:1.45rem
}
.modern-page p,.modern-page li {
line-height:1.7;
overflow-wrap:break-word
}
.site-topline {
background:var(--green);
color:#f3efe1;
text-align:center;
padding:8px 20px;
font-size:.75rem;
letter-spacing:.05em
}
.modern-page .site-header {
max-width:1240px;
background:transparent;
border-bottom:1px solid var(--line);
padding:27px 30px;
display:flex;
gap:30px;
align-items:center;
justify-content:space-between
}
.site-brand {
font-family:Georgia,serif;
font-weight:bold;
font-size:1.9rem;
letter-spacing:-.055em;
white-space:nowrap
}
.site-brand span {
font-size:1.1rem;
font-weight:normal;
letter-spacing:-.03em
}
.site-brand small {
display:block;
font:600 .59rem/1.4 system-ui,sans-serif;
letter-spacing:.2em;
padding-top:5px
}
.modern-page .site-header nav {
gap:23px;
padding:0;
font-size:.86rem;
font-weight:600
}
.modern-page .site-header nav a {
text-decoration:none;
padding:10px 0
}
.header-actions {
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end
}
.header-action {
border:1px solid var(--green);
padding:10px 14px;
font-size:.8rem;
text-decoration:none;
white-space:nowrap;
border-radius:3px
}
.modern-page main {
max-width:1180px;
background:transparent;
padding:36px 30px 65px;
min-height:60vh
}
.modern-page .home-main {
padding-top:28px
}
.home-hero {
display:grid;
grid-template-columns:1.7fr 1fr;
gap:60px;
padding:50px 0 60px;
border-bottom:1px solid var(--line);
align-items:center
}
.eyebrow {
font-size:.69rem!important;
font-weight:700;
letter-spacing:.16em;
color:var(--muted);
margin:0 0 16px;
text-transform:uppercase
}
.home-hero h1 {
font-size:clamp(3.1rem,6.4vw,5.2rem);
line-height:1.02;
letter-spacing:-.055em;
margin:20px 0
}
.hero-intro {
max-width:530px;
font-size:1.06rem;
color:var(--muted)
}
.hero-search {
margin-top:28px
}
.hero-search label {
font-size:.78rem;
font-weight:650;
margin-bottom:9px
}
.hero-search>div {
display:flex;
background:white;
border:1px solid #acb7a8;
padding:6px;
border-radius:5px;
box-shadow:0 8px 24px #20372b08
}
.modern-page .hero-search input {
flex:1;
min-width:0;
border:0;
background:transparent;
width:100%;
padding:12px;
font-size:1rem
}
.modern-page .hero-search button {
white-space:nowrap
}
.modern-page button,.button-link {
background:var(--green);
color:white;
border-radius:3px;
padding:12px 18px;
font:600 .88rem system-ui,sans-serif;
min-height:46px;
border:1px solid transparent;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center
}
.modern-page .button-link {
color:white
}
.modern-page button:hover,.button-link:hover {
background:#28644f;
color:white
}
.search-hint {
font-size:.78rem;
color:var(--muted)
}
/* Reuse this decorative frame for arched panels; keep their content as real text. */
.andalusian-arch {
background:transparent url("assets/andalusian-arch.svg") center / 100% 100% no-repeat
}
.hero-note {
min-height:420px;
align-self:start;
width:100%;
padding:58px 55px 40px;
text-align:center;
max-width:350px;
justify-self:end
}
.large-mark {
font-family:Georgia,serif;
font-size:5rem;
color:#477461;
line-height:1.1;
display:block;
margin:16px 0 35px
}
.hero-note .eyebrow {
line-height:1.8
}
.hero-note p:not(.eyebrow) {
font-size:.88rem;
color:var(--muted)
}
.hero-note a {
font-size:.83rem;
font-weight:650
}
.home-section {
padding:45px 0 12px
}
.section-heading {
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin-bottom:22px
}
.section-heading .eyebrow {
margin-bottom:10px
}
.section-heading h2 {
font-size:2.1rem;
margin:0
}
.section-heading>a {
font-size:.82rem;
white-space:nowrap
}
.browse-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px
}
.modern-page .browse-card {
border:1px solid var(--line);
padding:27px;
background:#fffdf8;
border-radius:4px;
display:flex;
flex-direction:column;
min-height:200px;
transition:border-color .15s
}
.browse-card:hover {
border-color:#92a18b
}
.browse-card h3 {
font-family:Georgia,serif;
font-weight:normal;
margin:0 0 12px;
font-size:1.55rem
}
.browse-card h3 a {
text-decoration:none
}
.browse-card p:not(.eyebrow) {
font-size:.88rem;
color:var(--muted);
margin:0 0 20px
}
.browse-card .card-link {
margin-top:auto;
display:flex;
justify-content:space-between;
text-decoration:none;
font-weight:600;
font-size:.8rem;
padding-top:17px
}
.contribute-panel {
background:#e9ede1;
padding:30px 35px;
display:flex;
gap:25px;
justify-content:space-between;
align-items:center;
margin:48px 0 0;
border-radius:4px
}
.contribute-panel h2 {
font-size:2rem;
margin:8px 0
}
.contribute-panel p {
margin:0
}
.contribute-panel .eyebrow {
font-size:.65rem!important
}
.breadcrumb {
font-size:.75rem;
color:var(--muted);
margin:0 0 30px
}
.breadcrumb span {
padding:0 10px
}
.page-intro {
max-width:730px;
color:var(--muted);
font-size:1.08rem
}
.result-count {
font-size:.78rem;
color:var(--muted)
}
.library-filter {
display:flex;
align-items:end;
gap:12px;
max-width:620px;
margin:25px 0
}
.library-filter label {
flex:1;
margin:0;
font-size:.8rem
}
.library-filter input {
width:100%
}
.modern-page input,.modern-page select,.modern-page textarea {
border:1px solid #aebaa8;
border-radius:3px;
background:#fffefa;
color:var(--ink);
padding:11px;
font:inherit;
max-width:100%
}
.modern-page textarea {
width:100%
}
.account-form {
max-width:620px
}
.account-form label {
font-size:.88rem
}
.account-form input {
width:100%
}
.editorial-layout {
display:grid;
grid-template-columns:minmax(0,1fr) 230px;
gap:55px
}

.rich-text-editor {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  margin-top:6px
}
.rich-text-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  background:#eef4ea;
  border-bottom:1px solid var(--line)
}
.rich-text-toolbar button {
  min-height:36px;
  padding:7px 10px;
  font-size:.85rem;
  background:#fffdf8;
  color:var(--ink);
  border:1px solid var(--line)
}
.rich-text-surface {
  min-height:320px;
  padding:16px;
  line-height:1.6;
  outline:0
}
.rich-text-surface:focus {
  box-shadow:inset 0 0 0 2px #5da74c
}
.rich-text-surface h2,
.rich-text-surface h3 {
  margin:14px 0 8px
}
.rich-text-surface p {
  margin:0 0 12px
}

.rich-text-mode-row {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px;
  background:#eef4ea;
  border-top:1px solid var(--line)
}
.rich-text-mode-row button {
  min-height:36px;
  padding:7px 10px;
  font-size:.85rem;
  background:#fffdf8;
  color:var(--ink);
  border:1px solid var(--line)
}
.rich-text-editor .ql-toolbar.ql-snow {
  border:0;
  border-bottom:1px solid var(--line);
  background:#eef4ea
}
.rich-text-editor .ql-container.ql-snow {
  border:0;
  min-height:320px;
  font:inherit
}
.rich-text-editor .ql-editor {
  min-height:320px;
  line-height:1.6;
  font:inherit;
  color:var(--ink)
}

.rich-text-source {
  border:0!important;
  border-radius:0!important;
  min-height:320px
}

.modern-page .editorial-body {
  border:0;
  padding:0;
  min-width:0;
  max-width:860px;
  font-size:1.05rem;
  line-height:1.72;
  overflow-wrap:anywhere
}
.editorial-body > *:first-child {
  margin-top:0
}
.editorial-body p,.editorial-body li {
  max-width:75ch
}
.editorial-body p {
  margin:0 0 1.1rem
}
.editorial-body a {
  font-weight:650
}
.editorial-body table {
  display:block;
  width:100%;
  max-width:100%;
  margin:1.35rem 0;
  overflow-x:auto;
  border-collapse:collapse;
  border-spacing:0;
  font-size:.98rem;
  background:#fffdf8
}
.editorial-body tbody {
  vertical-align:top
}
.editorial-body td,.editorial-body th {
  padding:8px 10px;
  max-width:100%;
  vertical-align:top
}
.editorial-body img {
  height:auto;
  max-width:min(100%, 390px);
  border-radius:8px
}
.editorial-body img:not([src]),
.editorial-body img[src=""],
.editorial-body img[alt="clear"] {
  display:none!important
}
.editorial-body img[src*="/web_icons/"],
.editorial-body img[src*="acrobat"],
.editorial-body img[src*="pdf"] {
  max-width:34px;
  border-radius:0;
  vertical-align:middle
}

.editorial-body figure {
  margin:1.25rem 0;
}
.editorial-body figure img,
.editorial-body p img:not([src*="/web_icons/"]):not([src*="acrobat"]):not([src*="pdf"]) {
  display:block;
  margin:1rem 0;
  clear:both;
}


.editorial-body > table:first-of-type {
  display:block;
  width:100%;
  max-width:720px;
  padding:1.35rem 1.5rem;
  margin:1.5rem 0 1.75rem;
  overflow:visible;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:14px;
}
.editorial-body > table:first-of-type tbody,
.editorial-body > table:first-of-type tr,
.editorial-body > table:first-of-type td,
.editorial-body > table:first-of-type th {
  display:block;
  width:100%;
  padding:0;
}
.editorial-body > table:first-of-type td + td {
  margin-top:.85rem;
}
.editorial-body > table:first-of-type h3 {
  margin:0 0 .35rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:1.15rem;
  line-height:1.25;
  letter-spacing:.01em;
}
.editorial-body > table:first-of-type h3 img {
  flex:0 0 auto;
  max-width:34px;
  margin:0;
}
.editorial-body > table:first-of-type td:empty,
.editorial-body > table:first-of-type td:has(> strong:empty) {
  display:none;
}
.editorial-body > table:first-of-type img:not([src*="/web_icons/"]) {
  display:block;
  max-width:min(100%, 260px);
  margin:.8rem 0 0;
}
.editorial-body > table:not(:first-of-type):has(img:not([src*="/web_icons/"])) {
  display:block;
  width:fit-content;
  max-width:min(100%, 340px);
  padding:.75rem;
  margin:1.25rem 0;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:12px;
}
.editorial-body > table:not(:first-of-type):has(img:not([src*="/web_icons/"])) tbody,
.editorial-body > table:not(:first-of-type):has(img:not([src*="/web_icons/"])) tr,
.editorial-body > table:not(:first-of-type):has(img:not([src*="/web_icons/"])) td {
  display:block;
  width:100%;
  padding:0;
}
.editorial-body > table:not(:first-of-type):has(img:not([src*="/web_icons/"])) img:not([src*="/web_icons/"]) {
  display:block;
  max-width:100%;
  margin:0;
}
@media(max-width:760px) {
  .editorial-body > table:first-of-type {
    max-width:100%;
    padding:1rem;
  }
}
.article-lead-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,280px);
  gap:1.25rem 2rem;
  align-items:end;
  max-width:860px;
  margin:0 0 2rem;
}
.article-lead-card .article-status {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:800;
  letter-spacing:.04em;
}
.article-lead-card .article-status img {
  max-width:34px;
  margin:0;
}
.article-lead-card figure {
  grid-column:2;
  grid-row:2;
  margin:0;
}
.article-lead-card div:last-child {
  grid-column:1;
  grid-row:2;
}
.article-lead-card p {
  margin:0;
}
.article-lead-card figure img {
  width:100%;
  max-width:280px;
  margin:0;
}
@media(max-width:760px) {
  .article-lead-card {
    grid-template-columns:1fr;
  }
  .article-lead-card figure,
  .article-lead-card div:last-child {
    grid-column:auto;
    grid-row:auto;
  }
}

.editorial-body blockquote {
  margin:25px 0;
  padding:5px 25px;
  border-left:3px solid #9bab85
}
.editorial-body font,
.editorial-body span {
  font-family:inherit!important
}
.editorial-body h2,
.editorial-body h3,
.editorial-body h4,
.editorial-body h5 {
  color:var(--green);
  line-height:1.25;
  margin:2rem 0 .7rem
}
.editorial-body h4,.editorial-body h5 {
  font-size:1.12rem
}
.editorial-body strong {
  color:var(--green)
}
.editorial-body hr {
  border:0;
  border-top:1px solid var(--line);
  margin:2rem 0
}
.editorial-body ul,.editorial-body ol {
  margin:0 0 1.25rem 1.5rem;
  padding:0
}
.editorial-body .eyebrow {
  color:var(--muted)
}
.content-columns {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:34px;
  max-width:980px;
  margin:28px 0
}
.content-columns h2,.content-note h2,.faq-list h2 {
  font-size:1.55rem;
  margin:0 0 12px
}
.content-note {
  max-width:760px;
  margin:32px 0;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fffdf8
}
.check-list {
  margin:0;
  padding-left:1.25rem
}
.check-list li {
  margin:0 0 10px
}
.browse-grid.compact {
  margin-top:28px
}
.browse-grid.about-cards {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
@media (max-width: 640px) {
  .browse-grid.about-cards { grid-template-columns:1fr; }
}
.faq-list {
  max-width:860px
}
.faq-list article {
  padding:22px 0;
  border-top:1px solid var(--line)
}
.faq-list h3 {
  margin:0 0 8px;
  font-size:1.25rem
}
.faq-list p {
  margin:0;
  max-width:75ch
}
@media (max-width: 760px) {
  .content-columns {
    grid-template-columns:1fr
  }
}
.reading-aside {
border-left:1px solid var(--line);
padding-left:25px;
font-size:.85rem
}
.reading-aside a {
display:block;
padding:12px 0
}
.reading-aside p:last-child {
font-size:.75rem;
color:var(--muted);
margin-top:25px
}
.modern-page .food-search-form {
max-width:780px;
padding:22px;
background:#eef0e7;
border-radius:4px;
margin:20px 0 30px
}
.modern-page .food-result {
background:#fffdf8;
border:1px solid var(--line);
padding:22px 25px;
margin:15px 0;
border-radius:4px
}
.modern-page .food-result h2 {
margin:0;
font-size:1.4rem
}
.food-result h2 a {
text-decoration:none
}
.search-modes a,.search-modes span,.search-modes button {
font-size:.76rem;
padding:6px 10px!important;
min-height:36px!important;
border:1px solid var(--line);
display:inline-flex;
align-items:center;
background:#fffdf8;
color:var(--green);
font-weight:600
}
.search-modes a[aria-current],.search-modes span[aria-current],.search-modes button[aria-current] {
background:var(--green);
color:white
}
.modern-page .site-footer {
max-width:none;
background:#e9ede1;
padding:45px max(30px,calc((100% - 1120px)/2));
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:30px;
border-top:1px solid #d5ddce
}
.site-footer h2 {
font-family:inherit;
font-size:.75rem;
letter-spacing:.1em;
text-transform:uppercase;
margin:0 0 15px
}
.site-footer>div>a:not(.site-brand) {
display:block;
font-size:.8rem;
text-decoration:none;
margin:9px 0
}
.site-footer p {
font-size:.82rem;
color:var(--muted)
}
.footer-note {
grid-column:1/-1;
border-top:1px solid #c9d2bf;
padding-top:20px;
margin:5px 0 0;
font-size:.7rem!important
}
.modern-page .rule-card {
background:#fffdf8;
border-color:var(--line)
}
.modern-page .sponsor-card {
background:#fffdf8;
border-color:var(--line);
border-left-color:#b39642
}
.review-signout button {
min-height:44px;
padding:10px 14px;
font-size:.85rem
}
.sr-only {
position:absolute;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap
}
.skip-link:focus {
color:var(--ink)
}
@media(max-width:1050px) {
.modern-page .site-header {
flex-wrap:wrap;
gap:15px
}
.site-header nav {
order:3;
width:100%;
justify-content:center;
border-top:1px solid var(--line);
padding-top:10px!important
}
.header-actions {
order:2
}
.home-hero {
gap:30px
}
.hero-note {
padding:35px 25px
}
.editorial-layout {
gap:25px;
grid-template-columns:minmax(0,1fr) 190px
}
}
@media(max-width:760px) {
.modern-page .site-header {
padding:20px
}
.modern-page main {
padding:25px 20px 45px
}
.home-hero {
grid-template-columns:1fr;
padding:20px 0 35px
}
.hero-note {
display:none
}
.home-hero h1 {
font-size:3.8rem
}
.browse-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px
}
.section-heading {
align-items:start;
flex-direction:column;
gap:14px
}
.section-heading h2 {
font-size:1.8rem
}
.editorial-layout {
grid-template-columns:1fr
}
.reading-aside {
border-left:0;
border-top:1px solid var(--line);
padding:25px 0
}
.modern-page .site-footer {
padding:35px 20px;
grid-template-columns:1fr 1fr
}
.site-footer>div:first-child {
grid-column:1/-1
}
.contribute-panel {
padding:25px;
align-items:start;
flex-direction:column
}
.home-section {
padding-top:35px
}
}
@media(max-width:480px) {
.site-brand {
font-size:1.65rem
}
.header-actions {
width:100%;
justify-content:space-between
}
.header-action {
font-size:.7rem;
padding:8px 10px
}
.operator-tools {
margin-top:32px;
padding:18px;
grid-template-columns:1fr
}
.operator-tool-groups {
grid-template-columns:1fr
}
.review-signout {
width:100%
}
.review-signout button {
width:100%
}
.modern-page .site-header nav {
gap:8px 17px;
font-size:.77rem
}
.home-hero h1 {
font-size:3.2rem
}
.hero-search>div {
flex-direction:column
}
.hero-search button {
width:100%
}
.browse-grid {
grid-template-columns:1fr
}
.modern-page .browse-card {
padding:23px;
min-height:170px
}
.library-filter {
align-items:stretch;
flex-direction:column
}
.library-filter button {
align-self:start
}
.modern-page h1 {
font-size:2.35rem
}
.modern-page .home-hero h1 {
font-size:3.2rem
}
.editorial-body td {
padding:5px
}
.modern-page nav {
gap:10px
}
.modern-page .site-footer {
gap:20px
}
}
@media(prefers-reduced-motion:reduce) {
* {
transition:none!important;
scroll-behavior:auto!important
}
}

.success-note,
.warning-note {
  border-left: 4px solid var(--deep-green);
  background: var(--soft-green);
  padding: 0.85rem 1rem;
  border-radius: 0 12px 12px 0;
}
.warning-note {
  border-left-color: #8a5a12;
  background: #fff7dc;
}

.test-mail-notice {
padding:16px 20px;
border:1px solid #bda666;
border-left:4px solid #957020;
background:#fbf0d6;
border-radius:3px;
font-size:.9rem;
max-width:780px
}
/* Catalog cards use real classification artwork and native accessible disclosure. */
.food-results {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.1rem;
margin:1.4rem 0
}
.food-results .food-card {
margin:0;
padding:1.3rem;
border:1px solid var(--line,#d7ddd5);
border-radius:16px;
background:#fff;
min-width:0;
overflow-wrap:anywhere
}
.food-card-heading {
display:flex;
gap:1rem;
align-items:center
}
.food-card-heading h2 {
margin:.15rem 0;
font-size:1.45rem
}
.food-card-heading .eyebrow {
margin:0
}
.food-classification {
font-weight:700;
color:#185346;
margin:.3rem 0
}
.food-classification-image {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
flex:0 0 84px;
width:84px;
min-height:92px;
margin:0;
background:#f0f5ec;
border-radius:12px
}
.food-classification-image img {
width:48px;
height:48px;
object-fit:contain
}
.food-classification-image figcaption {
font:10px/1.5 system-ui,sans-serif;
color:#46584e
}

.food-detail-layout {
display:flex;
gap:1rem;
align-items:flex-start;
margin:1rem 0 1.25rem
}
.food-trust {
margin:1rem 0;
padding:1rem;
border:1px solid #d7ddd5;
border-left:4px solid #446746;
border-radius:10px;
background:#fbfdf8
}
.food-trust-heading {
display:flex;
align-items:center;
gap:.55rem;
margin:0 0 .75rem
}
.food-trust h3 {
margin:0;
font-size:1.05rem
}
.help-popover {
position:relative;
display:inline-block
}
.help-popover summary {
display:inline-flex;
align-items:center;
justify-content:center;
width:1.45rem;
height:1.45rem;
border:1px solid #9eb1a5;
border-radius:999px;
background:#eef4ea;
color:#174f3f;
font-weight:800;
line-height:1;
cursor:pointer;
list-style:none
}
.help-popover summary::-webkit-details-marker {
display:none
}
.help-popover summary:focus-visible {
outline:3px solid #b8cdbd;
outline-offset:2px
}
.help-popover p {
position:absolute;
z-index:20;
top:calc(100% + 8px);
left:0;
width:min(320px,80vw);
margin:0;
padding:.85rem 1rem;
border:1px solid var(--line);
border-radius:8px;
background:#fffdf8;
box-shadow:0 14px 28px rgba(18,60,49,.16);
font-size:.92rem;
color:#304a40
}
.food-trust dl {
display:grid;
grid-template-columns:minmax(130px,190px) minmax(0,1fr);
gap:.45rem .9rem;
margin:0
}
.food-trust dt {
font-weight:800;
color:#185346
}
.food-trust dd {
margin:0
}
.food-trust p {
margin:.85rem 0 0
}
@media(max-width:680px) {
.food-detail-layout {
flex-direction:column
}
.food-trust dl {
grid-template-columns:1fr
}
}
.food-expansion {
border-top:1px solid #dde4da;
padding-top:.9rem
}
.food-expansion summary {
cursor:pointer;
min-height:44px;
padding:.55rem 0;
color:#185346;
font-weight:700
}
.food-expansion summary:focus-visible {
outline:3px solid #a36c18;
outline-offset:3px
}
.food-expanded-body h3 {
font-size:1.05rem;
margin-top:1.1rem
}
.search-access-note {
padding:.85rem 1rem;
background:#edf3e9;
border-left:3px solid #446746;
border-radius:4px
}
@media(max-width:680px) {
.food-results {
grid-template-columns:1fr
}
.food-results .food-card {
padding:1rem
}
.food-card-heading h2 {
font-size:1.25rem
}
}
.form-trap {
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden
}
/* Source-language titles remain visible without mixing bidirectional text on one line. */
.title-en,.title-ar {
display:block;
unicode-bidi:isolate
}
.title-ar {
font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif;
font-weight:400;
letter-spacing:normal;
line-height:1.65;
text-align:start
}
.modern-page h1:has(.title-ar) {
font-size:clamp(2rem,4vw,3.3rem);
line-height:1.16;
max-width:100%
}
.modern-page h1 .title-ar {
font-size:.7em;
margin-top:.45rem;
padding-top:.4rem;
color:#48665c;
max-width:100%
}
.breadcrumb .title-ar {
font-size:1em;
margin-top:.15rem
}
.editorial-body [lang="ar"] {
direction:rtl;
unicode-bidi:isolate;
line-height:1.9;
letter-spacing:normal
}
.editorial-body p[lang="ar"] {
font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif;
text-align:start;
background:#f0f4ed;
border-inline-start:3px solid #75917f;
padding:1rem 1.2rem;
border-radius:6px;
font-size:1.3rem
}

.editorial-body p[lang="ar"] + p {
  margin-top:-.35rem;
  padding-inline-start:1rem;
  border-inline-start:3px solid #cdd8c8
}
.editorial-body p[lang="ar"] + p em {
  font-size:1.05rem
}
.editorial-body h3 + h5,
.editorial-body h4 + p[lang="ar"] {
  margin-top:.9rem
}
.breadcrumb .title-en {
display:inline
}
.breadcrumb .title-ar {
display:none
}
/* Private suggestion comparisons stay readable without horizontal scrolling. */
.suggestion-match {
border:1px solid var(--line,#ccd7ce);
padding:1.25rem;
margin:1rem 0;
border-radius:8px;
overflow-wrap:anywhere
}
.suggestion-comparison summary {
cursor:pointer;
min-height:44px;
padding:.7rem 0;
font-weight:600
}
.suggestion-comparison summary:focus-visible {
outline:3px solid #a36c18;
outline-offset:3px
}
.comparison-columns {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.25rem
}
.comparison-columns section {
min-width:0;
background:#f0f4ed;
border-radius:6px;
padding:1rem
}
.comparison-columns h3 {
margin-top:0
}
.comparison-columns dt {
font-weight:600;
margin-top:.85rem
}
.comparison-columns dd {
margin:.3rem 0;
white-space:pre-wrap;
overflow-wrap:anywhere
}
@media(max-width:760px) {
.comparison-columns {
grid-template-columns:1fr
}
}
.review-decision {
margin-top:1.5rem;
padding:1.2rem;
border:1px solid var(--line,#ccd7ce);
border-radius:8px
}
.review-actions {
display:flex;
flex-wrap:wrap;
gap:.7rem
}
.review-notes {
white-space:pre-wrap;
overflow-wrap:anywhere
}
.external-destination {
overflow-wrap:anywhere;
font-family:monospace
}
/* Topic illustrations stay decorative; archived references carry the rulings. */
.modern-page .rule-card {
padding:0;
overflow:hidden;
display:grid;
grid-template-columns:142px minmax(0,1fr);
position:relative;
transition:border-color .18s ease,box-shadow .18s ease
}
.rule-art {
display:flex;
align-items:center;
justify-content:center;
background:#e7ece3;
color:#315a49;
min-height:210px
}
.rule-art svg {
width:132px;
height:auto;
max-width:100%
}
.rule-art-halo {
fill:#f7f7ed
}
.rule-art--ingredients {
background:#eee5d7;
color:#7b593a
}
.rule-art--ingredients .rule-art-halo {
fill:#faf3e6
}
.rule-art--principles {
background:#dfe9e5;
color:#235a4a
}
.rule-art--preparation {
background:#e9e7da;
color:#596349
}
.rule-card-copy {
padding:22px;
display:flex;
flex-direction:column;
align-items:flex-start
}
.rule-card-copy h2 {
margin:10px 0 12px;
font-size:1.45rem;
line-height:1.2
}
.rule-card-copy h2 a {
text-decoration:none
}
.rule-card-copy h2 a:after {
content:"";
position:absolute;
inset:0
}
.rule-card-copy>p:not(.rule-category) {
margin:0 0 20px;
font-size:.96rem;
line-height:1.65
}
.rule-category {
letter-spacing:.07em;
text-transform:uppercase;
font-size:.7rem
}
.rule-read {
margin-top:auto;
font-size:.8rem;
font-weight:600;
display:flex;
width:100%;
justify-content:space-between;
gap:12px
}
.rule-read span {
font-size:1rem
}
.modern-page .rule-card:hover,.modern-page .rule-card:focus-within {
border-color:#587667;
box-shadow:0 4px 16px #194a3c12
}
.rule-card:focus-within {
outline:2px solid #194a3c;
outline-offset:3px
}
@media(min-width:601px) and (max-width:1000px) {
.modern-page .rule-card {
grid-template-columns:104px minmax(0,1fr)
}
.rule-card-copy {
padding:18px
}
.rule-art svg {
width:100px
}
}
@media(max-width:600px) {
.modern-page .rule-card {
grid-template-columns:100px minmax(0,1fr)
}
.rule-art {
min-height:190px
}
.rule-card-copy {
padding:18px
}
.rule-card-copy h2 {
font-size:1.3rem
}
.rule-art svg {
width:96px
}
}
@media(prefers-reduced-motion:reduce) {
.modern-page .rule-card {
transition:none
}
}
.question-prose {
white-space:pre-wrap;
overflow-wrap:anywhere
}
.research-overview {
padding:20px;
background:#e7ece3;
border-radius:6px;
margin-bottom:24px
}
.research-candidate {
margin:12px 0;
padding:18px;
border:1px solid var(--line);
border-radius:6px
}
.research-candidate>details>summary {
cursor:pointer;
font-size:1.15rem
}
.research-meta {
display:block;
font-size:.8rem;
font-weight:400;
margin:8px 0;
color:#456363
}
.research-candidate p {
overflow-wrap:anywhere
}
/* Keep navigation links balanced and touch-sized on phones. */
@media(max-width:600px) {
.modern-page .site-header {
gap:12px;
padding:16px 20px
}
.modern-page .site-header nav {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 8px;
padding:8px 0 0!important;
text-align:center;
font-size:.8rem
}
.modern-page .site-header nav a {
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:8px 2px;
line-height:1.35
}
.modern-page .home-main {
padding-top:16px
}
}
@media(max-width:350px) {
.modern-page .site-header nav {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.site-header .site-brand {
font-size:1.45rem
}
.site-header .header-action {
font-size:.65rem;
padding:8px
}
}
/* Accessible password visibility control, including dynamically created forms. */
.password-control {
display:flex;
align-items:stretch;
width:100%;
max-width:100%;
gap:0;
}
.password-control input {
flex:1;
min-width:0;
width:0;
margin:0;
border-radius:3px 0 0 3px;
}
.password-control .password-toggle {
flex:0 0 48px;
min-width:48px;
min-height:48px;
margin:0;
padding:10px;
display:grid;
place-items:center;
color:#194d40;
background:#f5f4ed;
border:1px solid #8b9c8d;
border-left:0;
border-radius:0 3px 3px 0;
}
.password-toggle svg {
width:24px;
height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
}
.password-control .password-toggle[aria-pressed="true"] {
background:#dce9df;
}
.password-control .password-toggle:focus-visible {
outline:3px solid #b87516;
outline-offset:2px;
}
/* Commercial operator hub: connects modules into a product workflow. */
.commercial-board {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1rem;
margin:2rem 0
}
.commercial-card {
background:#fffdf8;
border:1px solid var(--line);
border-radius:10px;
padding:1.25rem;
min-width:0
}
.commercial-card h2 {
margin:.2rem 0 .65rem
}
.commercial-card ul {
list-style:none;
margin:1rem 0 0;
padding:0
}
.commercial-card li {
border-top:1px solid var(--line);
padding:.85rem 0
}
.commercial-card li:first-child {
border-top:0
}
.commercial-card li a {
font-weight:700
}
.commercial-card li span {
display:block;
color:var(--muted);
font-size:.88rem
}
.release-lane {
background:#e9ede1;
border:1px solid #d5ddce;
border-radius:10px;
padding:1.25rem;
margin:1.5rem 0
}
.release-lane ol {
padding-left:1.35rem
}
.release-lane li {
margin:.7rem 0
}
@media(max-width:760px) {
.commercial-board {
grid-template-columns:1fr
}
.commercial-card {
padding:1rem
}
}

.membership-plan-card {
border:1px solid var(--line,#ccd7ce);
border-radius:12px;
padding:1.45rem;
margin:1.2rem 0;
background:#fffdfa;
box-shadow:0 10px 24px rgba(20,70,55,.05);
max-width:760px;
}
.membership-plan-active {
border-color:#adc8b3;
background:linear-gradient(135deg,#fffdfa 0%,#eef6ec 100%);
}
.membership-plan-heading {
display:flex;
justify-content:space-between;
gap:1rem;
align-items:flex-start;
}
.membership-plan-card h2 {
margin:.35rem 0 .6rem;
font-size:1.75rem;
line-height:1.15;
}
.membership-plan-card p {
margin:.45rem 0;
}
.membership-state {
font-weight:700;
font-size:1.08rem;
color:var(--ink,#153f35);
}
.membership-badge {
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:.35rem .75rem;
font-weight:800;
font-size:.82rem;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}
.membership-badge-active {
background:#0f553f;
color:#fff;
}
.membership-badge-inactive {
background:#e9eee7;
color:#52645b;
}
.membership-facts {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:1rem;
margin:1.2rem 0 0;
}
.membership-facts div {
border-top:1px solid var(--line,#ccd7ce);
padding-top:.85rem;
}
.membership-facts dt {
font-size:.72rem;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--muted,#52645b);
margin-bottom:.25rem;
}
.membership-facts dd {
margin:0;
font-weight:700;
color:var(--ink,#153f35);
}

.manual-billing-list {
display:grid;
gap:1rem;
margin-top:1rem;
}
.manual-billing-item {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);
gap:1rem;
background:#fffdf8;
border:1px solid var(--line);
border-radius:10px;
padding:1rem;
}
.manual-billing-item h3 {
margin:.15rem 0 .7rem;
font-size:1.35rem;
}
.manual-billing-item p {
margin:.35rem 0;
word-break:break-word;
}
.manual-billing-actions {
display:grid;
gap:.75rem;
align-content:start;
}
.manual-billing-actions form {
background:#f6f7f0;
border:1px solid #d5ddce;
border-radius:8px;
padding:.75rem;
}
.manual-billing-actions label {
display:grid;
gap:.35rem;
font-weight:700;
}
.manual-billing-actions input {
width:100%;
padding:.55rem .65rem;
border:1px solid #9cb09d;
border-radius:4px;
background:#fffdf8;
color:var(--ink);
}
.manual-billing-actions button {
margin-top:.45rem;
}
@media(max-width:760px) {
.manual-billing-item {
grid-template-columns:1fr;
}
}

.rich-editor-help {
background:#eef0e7;
border:1px solid var(--line);
border-radius:6px;
padding:.9rem 1rem;
margin:1rem 0;
font-size:.9rem
}
.rich-editor-help code {
background:#fffdf8;
border:1px solid var(--line);
border-radius:3px;
padding:.1rem .25rem
}
.rich-editor {
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
line-height:1.55
}
.editorial-body .sponsor-placements {
margin:2rem 0;
padding:0
}
.editorial-body .sponsor-card h2 {
font-family:inherit;
font-size:1.1rem;
letter-spacing:0
}

.rich-text-editor .ql-toolbar button,
.rich-text-editor .ql-toolbar .ql-picker-label,
.rich-text-editor .ql-toolbar .ql-picker-item {
  min-height:0;
  padding:3px 5px;
  font:inherit;
  background:transparent;
  color:inherit;
  border:0;
  border-radius:0;
  box-shadow:none
}
.rich-text-editor .ql-toolbar button {
  width:28px;
  height:28px
}
.rich-text-editor .ql-toolbar button svg {
  width:18px;
  height:18px
}
.rich-text-editor .ql-toolbar .ql-picker {
  font-size:14px
}
.rich-text-editor .ql-toolbar .ql-header {
  width:110px
}
.rich-text-editor .ql-toolbar.ql-snow {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  padding:8px 10px
}
.rich-text-editor .ql-toolbar.ql-snow .ql-formats {
  margin-right:8px
}

.context-trail {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:.9rem;
  margin:0 0 22px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f2f5ee;
}
.context-trail a {
  font-weight:700;
}
.context-trail span {
  color:#52645c;
}

.rule-detail-hero {
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:28px;
  align-items:center;
  max-width:980px;
  margin:0 0 36px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:#fffdf8
}
.rule-detail-art {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  background:#e7ece3;
  color:#315a49
}
.rule-detail-art svg {
  width:150px;
  height:auto
}
.rule-detail-hero > div:last-child {
  padding:24px 28px 24px 0
}
.rule-detail-hero h2 {
  font-size:2rem;
  margin:.4rem 0 .6rem
}
.rule-detail-hero p:not(.rule-category) {
  max-width:66ch
}
@media(max-width:700px) {
  .rule-detail-hero {
    grid-template-columns:1fr
  }
  .rule-detail-hero > div:last-child {
    padding:0 22px 24px
  }
}

/* Quran and Hadith passages in rule detail pages are primary content. */
.inner-main .rule-detail-hero ~ p[lang="ar"],
.inner-main .rule-detail-hero ~ div p[lang="ar"],
.inner-main .rule-detail-hero ~ section p[lang="ar"],
.inner-main .rule-detail-hero + p[lang="ar"],
.inner-main p[lang="ar"][dir="rtl"] {
  direction:rtl;
  unicode-bidi:isolate;
  font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,serif;
  font-size:clamp(1.45rem,2.5vw,2rem);
  line-height:2.15;
  text-align:center;
  letter-spacing:normal;
  color:#123c31;
  background:#f0f4ed;
  border:1px solid #c9d8c9;
  border-top:5px solid #174f3f;
  border-radius:10px;
  padding:1.35rem 1.6rem;
  margin:1.6rem 0 .75rem;
  box-shadow:0 12px 28px rgba(18,60,49,.08);
}
.inner-main p[lang="ar"][dir="rtl"] + p {
  margin-top:.2rem;
  padding:1rem 1.15rem;
  border-inline-start:4px solid #75917f;
  background:#fffdf8;
  border-radius:8px;
}
.inner-main p[lang="ar"][dir="rtl"] + p em {
  font-size:1.08rem;
  line-height:1.8;
}

.content-note-inline {
  border-left:4px solid var(--green);
  background:#eef4ea;
  padding:.75rem 1rem;
  color:#304a40;
}

.back-to-top {
  position:fixed;
  right:clamp(16px,3vw,34px);
  bottom:clamp(16px,3vw,34px);
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.78rem .95rem;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:#174f3f;
  color:#fff;
  box-shadow:0 16px 32px rgba(18,60,49,.26);
  font-weight:800;
  text-decoration:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.96);
  transition:opacity .18s ease, transform .18s ease, background .18s ease
}
.back-to-top span[aria-hidden="true"] {
  display:inline-grid;
  place-items:center;
  width:1.6rem;
  height:1.6rem;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:1.15rem;
  line-height:1
}
.back-to-top.is-visible,
.back-to-top:focus-visible {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1)
}
.back-to-top:hover {
  background:#0f3f33
}
@media(max-width:640px) {
  .back-to-top {
    right:14px;
    bottom:14px;
    padding:.7rem
  }
  .back-to-top span:last-child {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
  }
}
@media(prefers-reduced-motion:reduce) {
  .back-to-top {
    transition:none
  }
}
/* Membership operations: clear business status without activating payments. */
.billing-status-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:1rem;
margin:1.5rem 0 2rem;
}
.billing-status-card {
background:#fffdf8;
border:1px solid var(--line);
border-radius:10px;
padding:1.1rem;
min-width:0;
}
.billing-status-card h2 {
font-size:1.45rem;
margin:.2rem 0 .55rem;
word-break:break-word;
}
.billing-status-card p:last-child {
color:var(--muted);
font-size:.92rem;
}
@media(max-width:760px) {
.billing-status-grid {
grid-template-columns:1fr;
}
}

/* Correction context stays separate from the editable report. */
.correction-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 2rem; align-items: start; }
.correction-layout form { min-width: 0; }
.correction-reference { margin-top: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .correction-layout { grid-template-columns: 1fr; } .correction-reference { grid-row: 1; } }

.account-identity-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.account-identity-bar p, .account-identity-bar form { margin: 0; }
.account-identity-bar p { overflow-wrap: anywhere; min-width: 0; }

.correction-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.correction-comparison > section { min-width: 0; }
.correction-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) { .correction-comparison { grid-template-columns: 1fr; } }

/* Receipt and short-page footer layout; footer remains in normal document flow. */
body.modern-page { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body.modern-page > main { flex:1 0 auto; width:100%; }
body.modern-page > .site-header, body.modern-page > .site-footer { flex-shrink:0; }
body.modern-page > .site-footer { width:100%; margin:0; }
.contact-receipt { max-width:46rem; margin:0 auto; padding:2rem; background:#fff; border:1px solid #d3dbcf; border-radius:12px; }
.contact-receipt h1 { font-size:clamp(1.8rem,3vw,2.7rem); }
.receipt-check { display:inline-grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; background:#e5f0e5; color:#185343; font-size:1.5rem; }
.receipt-reference { padding:1rem; background:#f1f4ed; border-radius:8px; }
.receipt-reference span { display:block; margin-bottom:.5rem; }
.receipt-reference strong { font: .9rem ui-monospace,monospace; overflow-wrap:anywhere; }
.receipt-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem; }
@media(max-width:600px){.contact-receipt{padding:1.25rem;}}

/* Consumer offer: readable comparison and steps on narrow and wide screens. */
.membership-comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.5rem; margin:1.5rem 0; }
.membership-comparison .content-note { margin:0; }
.membership-comparison li, .membership-steps li { margin-bottom:.75rem; }
.food-context { border-left:3px solid var(--border, #cbb993); padding-left:1rem; margin:1rem 0; }
.record-provenance { font-size:.9rem; }

/* Ingredient field guides: source-led answers and optional decision workbooks. */
.gelatin-guide { max-width: 1040px; margin: 0 auto; }
.gelatin-guide section { scroll-margin-top: 24px; margin-block: 2rem; }
.guide-nav { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; padding: 1rem 0; border-block: 1px solid #cbd6cf; }
.guide-example, .guide-workbook { padding: clamp(1rem, 3vw, 2rem); border: 1px solid #cbd6cf; border-radius: 16px; background: #f1f5ee; }
.guide-example { border-left: 5px solid #bca76b; background: #faf6e9; }
.guide-table-wrap { max-width: 100%; overflow-x: auto; }
.guide-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.guide-table caption { text-align: left; margin-bottom: .8rem; }
.guide-table th, .guide-table td { padding: 1rem; border-bottom: 1px solid #cbd6cf; vertical-align: top; overflow-wrap: anywhere; }
.guide-table thead { background: #174e42; color: white; }
.guide-table th { text-align: left; }
.guide-table th:first-child { width: 25%; }
.guide-form { display: grid; gap: .7rem; max-width: 620px; }
.guide-form select { width: 100%; padding: .8rem; color: #193e35; background: white; border: 1px solid #698379; border-radius: 6px; font: inherit; }
.guide-form button { margin-top: .6rem; }
.guide-outcome { border-left: 5px solid #174e42; padding: .8rem 1.3rem; background: white; }
.guide-cases details { padding: 1rem 0; border-bottom: 1px solid #cbd6cf; }
.guide-cases summary { cursor: pointer; font-weight: 700; }
.guide-sources { font-size: .94rem; }
.guide-sources li { margin-bottom: 1rem; overflow-wrap: anywhere; }
.guide-enquiry { margin: 1rem 0; padding: 1rem 1.4rem; border-left: 4px solid #bca76b; background: white; }
@media (max-width: 600px) { .guide-table th, .guide-table td { padding: .6rem .35rem; font-size: .88rem; } .guide-table th:first-child { width: 24%; } }
@media print { .guide-nav, .guide-form button { display: none; } .gelatin-guide section { break-inside: auto; } .guide-table { font-size: 10pt; } }

/* Product comparisons: evidence stays adjacent to the choice it supports. */
.product-grid, .product-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.gelatin-guide article.product-card { border: 1px solid #bdcfc6; border-radius: 14px; padding: clamp(1rem, 2.5vw, 1.6rem); background: #fff; overflow-wrap: anywhere; }
.product-card h3, .product-card h4 { margin-top: 0; font-size: 1.25rem; }
.product-market { color: #53625b; font-size: .94rem; }
.product-sample { border-left: 5px solid #bca76b; background: #faf6e9; }
.product-card summary { cursor: pointer; font-weight: 700; }
.product-sources a { display: inline-block; margin: .3rem .8rem .3rem 0; }
.product-decisions h4 { font-size: 1.1rem; margin-bottom: .5rem; }
.product-decisions section { margin-block: .5rem; }
@media (max-width: 700px) { .product-grid, .product-decisions { grid-template-columns: 1fr; } }
@media print { .product-grid { display: block; } .product-card { break-inside: avoid; margin-bottom: 1rem; } }

/* Public policies are part of the main reading experience. */
.published-policy { max-width: 76ch; margin: 0 auto; }
.published-policy h2 { margin-top: 2rem; }
.policy-version { font-weight: 600; color: #244c40; }
.policy-table { overflow-x: auto; margin: 1rem 0; }
.policy-table table { border-collapse: collapse; width: 100%; }
.policy-table th, .policy-table td { text-align: left; vertical-align: top; padding: .8rem; border: 1px solid #c9d3c9; }
.sponsor-disclosure { font-weight: 700; }
.sponsor-card dl { overflow-wrap: anywhere; }
.sponsor-card dt { font-weight: 700; margin-top: .6rem; }
.sponsor-card dd { margin-left: 0; }
@media(min-width:1051px) {
  .modern-page .site-header { gap:20px; }
  .modern-page .site-header nav { gap:12px; }
  .modern-page .site-footer { grid-template-columns:1.6fr 1fr 1fr 1.4fr; }
}

/* Shared vector wordmark: Beta belongs to the header artwork, once per page. */
.site-brand .site-wordmark {
display:block;
width:230px;
max-width:100%;
height:auto;
}
.site-footer .site-wordmark { width:220px; }
@media(max-width:420px) {
.site-brand .site-wordmark { width:210px; }
}

/* Rules browsing: reach the filters sooner without hiding navigation or policies. */
.rules-filter-help { font-size:.85rem; color:var(--muted); }
.rules-page .rule-card { scroll-margin-top:1rem; }
@media(max-width:640px) {
  .modern-page.rules-page .site-topline { display:none; }
  .modern-page.rules-page .site-header {
    display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 16px;
  }
  .rules-page .site-header .site-brand { grid-column:1 / -1; order:0; }
  .rules-page .site-header .site-wordmark { width:180px; }
  .rules-page .site-header .header-action {
    order:1; min-height:44px; padding:8px; display:flex; align-items:center; justify-content:center;
    font-size:.75rem;
  }
  .modern-page.rules-page .site-header nav {
    order:2; grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 4px; padding:0!important; font-size:.75rem;
  }
  .modern-page.rules-page .site-header nav a { min-height:44px; padding:4px 0; }
  .modern-page.rules-page .site-header nav a[href="/contact"] { grid-column:auto; }
  .modern-page.rules-page main { padding:16px 16px 32px; }
  .rules-page .breadcrumb { margin:0 0 8px; }
  .modern-page.rules-page h1 { font-size:2rem; margin:0 0 12px; }
  .rules-page #rules-search-help { margin:0 0 16px; line-height:1.5; }
  /* An in-flow control cannot cover article text, form fields or results. */
  .modern-page .back-to-top {
    position:static; align-self:center; width:fit-content; margin:16px auto;
    opacity:1; pointer-events:auto; transform:none; box-shadow:none; min-height:44px;
  }
  .modern-page .back-to-top span:last-child {
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
  }
}

/* Scoped snack guide: readable product evidence at desktop and phone widths. */
.snack-guide { max-width: 74rem; }
.snack-guide section { margin-block: 2rem; }
.snack-guide .snack-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.4rem; padding-block: .8rem; border-block: 1px solid var(--line); }
.snack-guide .snack-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.snack-guide .snack-product { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: clamp(1rem,2vw,1.5rem); background: #fff; overflow-wrap: anywhere; }
.snack-guide .snack-product h3 { margin-top: .4rem; }
.snack-guide .snack-product p { margin-block: .9rem; }
.snack-guide li { margin-block: .8rem; }
@media (max-width: 700px) { .snack-guide .snack-products { grid-template-columns: 1fr; } }


/* Article illustrations remain separate from product-specific ingredient evidence. */
.editorial-body .article-illustration {
  float:right;
  width:clamp(220px, 30vw, 320px);
  max-width:42%;
  margin:.25rem 0 1.25rem 1.5rem;
}
.editorial-body .article-illustration img { display:block; width:100%; max-width:100%; margin:0 0 .6rem; }
.editorial-body .article-illustration figcaption { color:var(--muted); font-size:.9rem; line-height:1.5; }
.editorial-body::after { content:""; display:block; clear:both; }

/* Data tables retain rows and columns rather than inheriting legacy lead-card stacking. */
.editorial-body .criteria-table-wrap { max-width:100%; overflow-x:auto; margin:1.5rem 0; }
.editorial-body .criteria-table { display:table; width:100%; min-width:640px; margin:0; }
.editorial-body .criteria-table th { text-align:left; background:var(--green); color:#fff; }
.editorial-body .criteria-table th div { background:transparent; }
.editorial-body .criteria-table td, .editorial-body .criteria-table th { padding:.85rem; border-bottom:1px solid var(--line); }
.editorial-body .criteria-table td:first-child { width:88px; }
.editorial-body .criteria-table img[src*="/web_icons/"] { width:64px; max-width:64px; height:auto; }
.editorial-body .criteria-table td:nth-child(2) { white-space:nowrap; }
@media(max-width:600px) {
  .editorial-body .article-illustration { float:none; width:min(100%, 320px); max-width:100%; margin:1rem auto 1.25rem; }
  .editorial-body .criteria-table img[src*="/web_icons/"] { width:48px; max-width:48px; }
}

@media(max-width:760px) {
  .editorial-body .criteria-table-wrap { overflow:visible; }
  .editorial-body .criteria-table { display:block; min-width:0; }
  .editorial-body .criteria-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .editorial-body .criteria-table tbody { display:grid; gap:1rem; }
  .editorial-body .criteria-table tbody tr { display:grid; grid-template-columns:64px minmax(0,1fr); padding:1rem; border:1px solid var(--line); border-radius:12px; }
  .editorial-body .criteria-table td { display:block; width:auto; padding:.5rem 0; border:0; }
  .editorial-body .criteria-table td:first-child { width:auto; grid-column:1; }
  .editorial-body .criteria-table td:nth-child(2) { grid-column:2; align-self:center; }
  .editorial-body .criteria-table td:nth-child(n+3) { grid-column:1 / -1; }
  .editorial-body .criteria-table td[data-label]::before { content:attr(data-label); display:block; font-weight:700; margin-bottom:.35rem; }
}

/* Public editorial images and classification keys scale with their reading context. */
.editorial-body img[src*="/web_icons/"] { width:clamp(40px,4vw,64px); max-width:64px; height:auto; }
.editorial-body > table:first-of-type img:not([src*="/web_icons/"]):not([src*="acrobat"]):not([src*="pdf"]):not([src*="clear"]) { width:100%; max-width:min(100%,320px); height:auto; }
.editorial-body .criteria-table td:nth-child(2) { white-space:normal; min-width:140px; overflow-wrap:normal; }
.editorial-body .criteria-table th { overflow-wrap:anywhere; }
.editorial-body .content-table-wrap { max-width:100%; overflow-x:auto; margin:1.5rem 0; }
.editorial-body .content-data-table, .editorial-body .icon-explanation-table { display:table; width:100%; margin:0; }
.editorial-body .content-data-table th { text-align:left; background:var(--green); color:#fff; }
.editorial-body .content-data-table td, .editorial-body .content-data-table th, .editorial-body .icon-explanation-table td { padding:.85rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.editorial-body .content-data-table th div { background:transparent; }
.editorial-body .icon-explanation-table td:first-child { width:88px; }
.editorial-body .related-recipe-card { clear:both; display:grid; grid-template-columns:minmax(140px,220px) minmax(0,1fr); align-items:center; gap:1.25rem; padding:1rem; border:1px solid var(--line); border-radius:12px; }
.editorial-body .related-recipe-card img { width:100%; max-width:220px; height:auto; margin:0; }
.editorial-body .related-recipe-card figcaption { font-size:1.1rem; }
.editorial-body .illustration-gallery { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0; }
.editorial-body .illustration-gallery figure { margin:0; }
.editorial-body .illustration-gallery img { width:100%; max-width:320px; height:auto; margin:0 0 .6rem; }
.editorial-body .illustration-gallery figcaption { color:var(--muted); font-size:.9rem; }
.editorial-body .symbol-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.editorial-body .directory-section-heading, .editorial-body .directory-key { grid-column:1 / -1; }
.editorial-body .directory-key { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; font-size:.85rem; color:var(--muted); }
.editorial-body .directory-key br { display:none; }
.editorial-body .certifier-card { display:grid; grid-template-columns:80px minmax(0,1fr); align-content:start; gap:.75rem 1rem; padding:1rem; background:#fffdf8; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.editorial-body .certifier-symbol img { display:block; width:80px; max-width:80px; height:auto; max-height:96px; object-fit:contain; }
.editorial-body .certifier-details > div + div { margin-top:.4rem; }
.editorial-body .certifier-details > div:first-child { font-weight:700; }
.editorial-body .certifier-note { grid-column:1 / -1; }
.editorial-body .certifier-note p { margin:0; }
.editorial-body .label-definitions, .editorial-body .substitution-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.editorial-body .label-definition, .editorial-body .substitution-card { padding:1.1rem; background:#fffdf8; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.editorial-body .term-label, .editorial-body .substitution-card > div:first-child { font-weight:700; margin-bottom:.6rem; }
.editorial-body .substitution-card > div + div, .editorial-body .label-definition > div + div { margin-top:.6rem; }
.editorial-body .topic-link-list { display:grid; gap:.6rem; }
.editorial-body .topic-link-list > div { padding:.85rem 1rem; background:#fffdf8; border:1px solid var(--line); border-radius:8px; }
@media(max-width:760px) {
  .editorial-body .symbol-directory, .editorial-body .label-definitions, .editorial-body .substitution-options { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .editorial-body img[src*="/web_icons/"] { width:48px; max-width:48px; }
  .editorial-body .content-table-wrap { overflow:visible; }
  .editorial-body .content-data-table { display:block; }
  .editorial-body .content-data-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .editorial-body .content-data-table tbody { display:grid; gap:1rem; }
  .editorial-body .content-data-table tbody tr { display:block; padding:1rem; border:1px solid var(--line); border-radius:12px; }
  .editorial-body .content-data-table td { display:block; padding:.45rem 0; border:0; }
  .editorial-body .content-data-table td:first-child { font-weight:700; }
  .editorial-body .content-data-table td[data-label]:not(:first-child)::before { content:attr(data-label); display:block; font-weight:700; }
  .editorial-body .related-recipe-card, .editorial-body .illustration-gallery { grid-template-columns:1fr; }
  .editorial-body .related-recipe-card img, .editorial-body .illustration-gallery img { max-width:100%; }
}

/* Single-photo recipe tables should fit their illustration, not leave an empty column. */
.editorial-body > table:first-of-type:has(> tbody > tr:only-child img[src*="/campaigns/"]) { width:min(100%,380px); max-width:100%; }