@font-face{font-family:Fraunces;src:url("/assets/fraunces.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Fraunces;src:url("/assets/fraunces-italic.woff2") format("woff2");font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/assets/source-sans-3.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/assets/dm-mono.woff2") format("woff2");font-weight:400;font-display:swap}

:root {
  color-scheme: light;
  --paper: #f6f1e7;
  --sheet: #fffefa;
  --ink: #1f2a2e;
  --muted: #54615b;
  --pine: #285b4f;
  --pine-dark: #203c35;
  --rust: #a7402d;
  --terracotta: #c8553d;
  --kraft: #e7d9b8;
  --blue-grid: #b9cde0;
  --rule: #d8d1c4;
  --control-rule: #667a6b;
  --serif: Fraunces, Georgia, serif;
  --sans: "Source Sans 3", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --measure: 78rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.05rem; line-height: 1.52; }
::selection { background: #e3b8a4; color: var(--ink); }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 580; line-height: 1.07; }
:is(h1, h2, h3, h4, legend, .button, .text-link, .format-preview-list li) { overflow-wrap: anywhere; }
h1 { letter-spacing: -.05em; }
h2, h3 { letter-spacing: -.035em; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:is(:disabled, [aria-disabled="true"]) { cursor: default; }
button, input, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
main:focus { outline: none; }
#library, #editable, #compare-sheets, #starter-sheet, #resource-preview, #cruise-bags, #cruise-bag-examples { scroll-margin-top: 1.5rem; }
.wrap { width: min(var(--measure), calc(100% - clamp(32px, 8.5vw, 120px))); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 400; font-size: .73rem; letter-spacing: .065em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 20; left: 1rem; top: .5rem; transform: translateY(-200%); padding: .65rem 1rem; background: var(--sheet); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid var(--rule); container: header / inline-size; }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; min-height: 4.65rem; }
.brand { display: inline-flex; align-items: center; gap: .58rem; width: fit-content; max-width: 100%; min-height: 44px; color: var(--pine-dark); font: 400 1.39rem/1 var(--mono); letter-spacing: -.105em; text-decoration: none; }
.brand > span:last-child { overflow-wrap: anywhere; }
.brand-dot { color: var(--terracotta); }
.brand-mark { position: relative; display: grid; place-items: center; flex: none; width: 2.05rem; height: 2.05rem; border-radius: .33rem; background: var(--pine-dark); color: var(--paper); }
.brand-mark::before { content: ""; position: absolute; width: .85rem; height: 1.03rem; border: 1.5px solid currentColor; border-radius: 2px; transform: rotate(-12deg); }
.brand-mark i { display: block; width: .52rem; height: .28rem; margin-top: 1px; transform: rotate(-12deg); border-block: 1px solid currentColor; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.1rem, 3vw, 2.5rem); }
.desktop-nav a, .mobile-nav nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-size: .97rem; }
.desktop-nav a:hover, .mobile-nav a:hover, .nav-active { color: var(--pine); }
.desktop-nav .nav-active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .42em; }
.header-search { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; gap: .62rem; padding: .5rem .93rem; border: 1px solid var(--control-rule); border-radius: .32rem; color: var(--pine-dark); text-decoration: none; font-weight: 650; font-size: .95rem; }
.header-search:hover { border-color: var(--pine); background: #e9ebe0; }
.search-icon { display: inline-block; position: relative; width: .84em; height: .84em; border: 1.5px solid currentColor; border-radius: 50%; margin: 0 .15em .1em 0; flex: 0 0 auto; }
.search-icon::after { content: ""; position: absolute; height: .35em; width: 1.5px; background: currentColor; top: .58em; left: .66em; transform: rotate(-45deg); }
.mobile-nav { display: none; }
.mobile-nav-toggle { min-height: 44px; min-width: 44px; display: flex; align-items: center; gap: .52rem; padding: 0 .2rem; border: 0; background: none; font: inherit; cursor: pointer; font-size: .95rem; font-weight: 650; color: var(--pine-dark); }
.mobile-nav-toggle:focus-visible, .mobile-nav nav a:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.menu-icon { width: 1em; height: .63em; border-block: 1.5px solid currentColor; position: relative; }
.menu-icon::after { content: ""; position: absolute; width: 100%; height: 1.5px; background: currentColor; top: 50%; transform: translateY(-50%); }
.mobile-nav nav { display: grid; gap: .1rem; padding: .65rem 1.1rem; border: 1px solid var(--rule); border-radius: .3rem; background: var(--sheet); }
.mobile-nav.is-enhanced nav { box-shadow: 0 10px 24px #1f2a2e15; position: absolute; right: 0; z-index: 5; width: min(16rem, 100%); }
.mobile-nav nav a { gap: .56rem; }

.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: center; gap: clamp(2rem, 4.3vw, 4.5rem); padding-block: clamp(2.55rem, 3.55vw, 3.15rem) clamp(3.25rem, 4.4vw, 3.65rem); }
.hero-copy { min-width: 0; }
.eyebrow { display: flex; gap: .63rem; align-items: center; color: var(--pine); }
.eyebrow-line { display: inline-block; width: 1.48rem; height: 1px; background: var(--terracotta); }
.hero h1 { margin-top: 1.1rem; font-size: clamp(3.85rem, 6.45vw, 6rem); line-height: .99; }
.hero h1 em { display: inline-block; color: var(--pine); font-weight: 480; font-style: italic; letter-spacing: -.056em; }
.hero-answer { max-width: 27.5rem; margin-top: 1.46rem; font-size: 1.2rem; line-height: 1.46; color: var(--muted); }
.hero-actions, .starter-actions { display: flex; flex-wrap: wrap; gap: .58rem 1.4rem; align-items: center; margin-top: 1.5rem; }
.hero-field-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; max-width: 32rem; margin: 1.1rem 0 0; padding: 0; list-style: none; counter-reset: field-note; }
.hero-field-notes li { position: relative; border-top: 1px solid #aab5a6; padding: .5rem .15rem 0 1.65rem; color: var(--muted); font-size: .91rem; line-height: 1.32; counter-increment: field-note; }
.hero-field-notes li::before { content: counter(field-note, decimal-leading-zero); position: absolute; inset: .58rem auto auto 0; color: var(--rust); font: .72rem var(--mono); }
.hero-field-notes strong { display: block; color: var(--pine-dark); margin-bottom: .18rem; }
.button { display: inline-flex; min-height: 48px; max-width: 100%; justify-content: center; align-items: center; gap: .5em; padding: .64rem 1.06rem; border: 1px solid transparent; border-radius: .32rem; font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s; }
.button.primary { color: white; background: var(--rust); border-color: var(--rust); }
.button.primary:hover { background: #873625; border-color: #873625; }
.button.primary:disabled { background: #e4d5c9; border-color: #e4d5c9; color: #674e44; }
.button.secondary { background: transparent; border-color: var(--control-rule); color: var(--pine-dark); }
.button.secondary:hover { border-color: var(--pine); background: #dbe6da; }
.arrow { display: inline-block; font-family: var(--sans); font-weight: 600; line-height: 1; white-space: nowrap; transition: transform .18s ease; }
:is(.button, .text-link, .sample-link, .resource-card):hover .arrow { transform: translateX(2px); }
.text-link { display: inline-flex; align-items: center; gap: .38rem; min-height: 44px; color: var(--pine-dark); font-weight: 650; text-decoration: underline; text-underline-offset: .28em; text-decoration-color: #94a598; }
.text-link:hover { text-decoration-color: currentColor; }
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 2rem;
  isolation: isolate;
  min-height: clamp(25rem, 33vw, 28rem);
  padding: 1rem clamp(12px, 2vw, 34px) 2.1rem;
  border: 1px solid #c2cdbf;
  border-radius: .58rem;
  background: #dee7db url("/assets/field-map.webp") center / cover;
}
.hero-paper { position: relative; width: min(90%, 28rem); container: itinerary / inline-size; animation: enter-paper .65s cubic-bezier(.22,.61,.36,1) both; }
@keyframes enter-paper { from { transform: translateY(11px) rotate(-1deg); opacity: .5; } to { transform: translateY(0) rotate(0); opacity: 1; } }
.sheet-backing {
  position: absolute; inset: 5% -2% 1% 4%; transform: rotate(7deg);
  border: 1px solid #c9bc9e; background: repeating-linear-gradient(0deg, #e5d8b7, #e5d8b7 17px, #dcccaa 18px);
  box-shadow: 0 7px 14px #24392e26; border-radius: .18rem;
}
.sheet {
  color: var(--ink); background: var(--sheet); border: 1px solid #d9dacd;
  border-radius: .2rem; padding: clamp(1rem, 2.8vw, 2rem);
}
.hero-sheet {
  position: relative; transform: rotate(-5.25deg); transition: transform .27s ease;
  padding: clamp(1.1rem, 2.4vw, 1.8rem); box-shadow: 0 18px 29px #1d352d33, 0 2px 5px #1d352d20;
}
.hero-sheet .sheet-table :is(th, td) { padding-block: .37rem; }
.hero-sheet .sheet-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: .17rem; }
.hero-paper:hover .hero-sheet { transform: rotate(-3.4deg) translateY(-3px); }
.paperclip { position: absolute; right: 2rem; top: -.99rem; width: .93rem; height: 2.25rem; border: 2px solid var(--terracotta); border-radius: 1rem; transform: rotate(13deg); }
.paperclip::before { position: absolute; content: ""; inset: .15rem -.08rem .31rem .18rem; border: 2px solid var(--terracotta); border-right: 0; border-radius: 1rem 0 0 1rem; }
.sheet-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; padding-bottom: .8rem; border-bottom: 1px solid #9eada0; }
.sheet-overline { color: var(--pine); font-size: .64rem; letter-spacing: .085em; }
.sheet-title { font-size: clamp(1.28rem, 2.6vw, 2.02rem); margin-top: .22rem; }
.sheet-stamp { color: var(--pine); text-transform: uppercase; padding: .15rem .42rem; border: 1px solid #82988a; border-radius: .16rem; transform: rotate(-6deg); font-size: .75rem; letter-spacing: .02em; }
.sheet-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-block: .8rem .88rem; }
.sheet-fields div { min-width: 0; }
.sheet-fields dt, .sheet-table thead { font: 400 .62rem/1.18 var(--mono); text-transform: uppercase; letter-spacing: .025em; color: var(--pine-dark); }
.sheet-fields dd { min-height: 1.18rem; border-bottom: 1px solid #b6c6d4; margin-top: .14rem; font-size: .79rem; font-weight: 600; overflow-wrap: anywhere; }
.sheet-table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: .78rem; line-height: 1.26; }
.sheet-table thead th { text-align: left; font-weight: 400; background: #e9efe7; }
.sheet-table th, .sheet-table td { border: 1px solid #c3d0d9; padding: .5rem .42rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.sheet-table tbody th, .sheet-table tfoot th { font-weight: 650; }
.readable-days { display: none; }
.sheet-notes { margin-top: .75rem; color: var(--pine-dark); overflow-wrap: anywhere; }
.sheet-notes span { font-size: .63rem; text-transform: uppercase; }
.sheet-notes p { border-bottom: 1px solid #c3d0d9; min-height: 1.2rem; font-size: .73rem; }
.sample-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding-inline: .61rem; color: var(--pine-dark); border-radius: .2rem; background: #f6f5e6; font-size: .95rem; text-decoration: none; font-weight: 650; }
.sample-link:hover { background: var(--sheet); }
.sample-link .arrow { font-size: 1rem; }
.hero-preview-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .42rem; width: 100%; }
.hero-preview-tools:not(:has([data-print-preview]:not([hidden]))) { display: none; }
.hero-preview-tools .view-controls { border-radius: .35rem; background: #f6f5e6; }
.hero-preview-tools .quiet-button { background: var(--sheet); }
.working-sheet, .hero-paper:hover .working-sheet { transform: none; }
.working-sheet-help { color: var(--muted); margin-top: .52rem; font-size: 1rem; line-height: 1.36; }
.working-sheet .sheet-fields dd { border-bottom: 0; }
.working-sheet [data-sheet-entry] { display: block; width: 100%; min-width: 0; color: var(--ink); background: #f7f9f2; border: 1px solid var(--control-rule); border-radius: .18rem; padding: .25rem .36rem; font: 500 1rem/1.3 var(--sans); }
.working-sheet [data-sheet-entry]::placeholder { color: var(--muted); opacity: 1; }
.working-sheet input[data-sheet-entry] { min-height: 44px; }
.working-sheet textarea[data-sheet-entry] { resize: vertical; }
.working-sheet .sheet-table td { height: 1.65rem; }
.sheet-entry-value { display: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-dialog.print-review { width: min(43rem, calc(100% - 24px)); }
.review-mode { margin-bottom: .3rem; font-weight: 700; color: var(--pine); }
.print-checks { color: var(--muted); margin-bottom: .75rem; }
.review-copy .sheet { transform: none; box-shadow: none; padding: clamp(10px, 3vw, 22px); }
.review-copy .paperclip, .review-copy .working-sheet-help { display: none; }
.review-copy .sheet-entry-value { display: block; }
.review-copy .working-sheet .sheet-fields dd { border-bottom: 1px solid #b6c6d4; }
.review-copy .sheet-table { display: none; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.review-actions .quiet-button[aria-pressed="true"] { background: var(--pine-dark); color: var(--sheet); }
.review-copy { --reading-size: 1rem; }
.print-review[data-large-text] .review-copy { --reading-size: 1.28rem; }
.review-copy .sheet-title { font-size: calc(var(--reading-size) * 1.4); }
.review-copy .sheet-stamp { transform: none; font-size: var(--reading-size); }
.review-copy .sheet-fields { font-size: var(--reading-size); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }
:is(.review-copy, .hero-paper) .readable-days { font-size: var(--reading-size, 1rem); }
.review-copy :is(.sheet-fields dt, .sheet-fields dd, .sheet-notes span, .sheet-notes p) { font: inherit; font-size: var(--reading-size); }
.review-copy :is(.sheet-fields dt, .sheet-notes span) { text-transform: none; font-weight: 700; }
.review-copy .sheet-fields dd { overflow-wrap: anywhere; }
.review-copy .readable-days { display: grid; grid-template-columns: minmax(0, 1fr); }
.readable-days:not(.blank-days) { margin: .8em 0; padding: 0; list-style: none; gap: .55em; }
.readable-days li, .blank-days { min-width: 0; overflow-wrap: anywhere; padding: .52em .62em; border: 1px solid #c3d0c6; border-radius: .22rem; background: #f1f3ea; }
.readable-days dl { display: grid; gap: .24em; margin-top: .28em; }
.readable-days dl > div { display: flex; flex-wrap: wrap; column-gap: .48em; }
.readable-days :is(dt, dd) { min-width: 0; }
.readable-days dt { color: var(--pine-dark); font-weight: 650; }
.readable-days dd { color: var(--muted); }
.blank-days { color: var(--muted); }

@container itinerary (max-width: 24rem) {
  :is(.hero-paper, .hero-paper:hover) .hero-sheet { transform: none; padding: clamp(10px, 2.75vw, 20px); }
  .hero-paper :is(.sheet-backing, .sheet-table) { display: none; }
  .hero-paper .paperclip { top: -.7rem; right: 1rem; }
  .hero-paper .sheet-stamp { transform: none; }
  .hero-paper .sheet-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .hero-paper .readable-days { display: grid; }
  .hero-paper :is(.sheet-fields dt, .sheet-fields dd, .sheet-notes span, .sheet-notes p) { font: inherit; font-size: 1rem; }
  .hero-paper :is(.sheet-fields dt, .sheet-notes span) { text-transform: none; font-weight: 700; }
}

.sheet-comparison { padding: 2.2rem 0 clamp(2.5rem, 5vw, 4.3rem); border-top: 1px solid var(--rule); container: comparison / inline-size; }
.compare-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1.5rem; margin-bottom: 1.15rem; }
.compare-heading h2 { max-width: 54rem; font-size: clamp(2.14rem, 4.35vw, 3.7rem); text-wrap: balance; }
.compare-heading p { color: var(--muted); margin-top: .48rem; }
.comparison-board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: #62766a; padding: .52rem; border-radius: .55rem;
}
@container comparison (max-width: 65rem) {
  .comparison-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container comparison (max-width: 33rem) {
  .comparison-board { grid-template-columns: minmax(0, 1fr); }
}
.comparison-card {
  min-width: 0; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: .55rem;
  background-color: var(--pine-dark);
  background-image: radial-gradient(#d9e5d520 .7px, transparent .8px); background-size: 11px 11px;
  color: var(--paper); padding: clamp(.85rem, 1.7vw, 1.35rem);
}
.comparison-card :focus-visible { outline-color: var(--kraft); }
.comparison-format { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 400 .87rem/1.2 var(--mono); letter-spacing: .035em; }
.comparison-format .format-mark { background: #f4f0e2; color: var(--pine-dark); width: 1.35rem; height: 1.35rem; }
.comparison-thumbnail {
  isolation: isolate; position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; min-width: 0; min-height: 112px; aspect-ratio: 1.53; padding: .95rem .73rem; border-radius: .25rem;
  background-color: var(--tone); background-image: radial-gradient(#506d6559 .6px, transparent .7px); background-size: 9px 9px;
}
.comparison-thumbnail::before { content: ""; position: absolute; z-index: -1; width: 68%; height: 76%; transform: rotate(7deg); background: var(--tone-back); border: 1px solid #465d5140; }
.comparison-thumbnail img {
  display: block; width: auto; height: auto; max-width: 94%; max-height: 100%; object-fit: contain;
  background: var(--sheet); box-shadow: 0 4px 10px #25352c40; transform: rotate(-4deg);
  transition: transform .25s ease;
}
.tone-sage .comparison-thumbnail img, .tone-lilac .comparison-thumbnail img { transform: rotate(4deg); }
.comparison-thumbnail:is(:hover, :focus-visible) img { transform: rotate(0) scale(1.05); }
.thumbnail-zoom { position: absolute; display: grid; place-items: center; inset: auto .42rem .42rem auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sheet); color: var(--pine-dark); }
.thumbnail-zoom .search-icon { font-size: .83rem; }
.comparison-card h3 { font-size: 1.55rem; margin-top: .36rem; }
.comparison-use { color: #dee6db; font-size: 1rem; line-height: 1.38; }
.comparison-file { border-top: 1px solid #d9e5d535; padding-top: .5rem; color: #dee6db; font-size: 1rem; line-height: 1.37; }
.comparison-file strong { color: var(--paper); }
.comparison-file p { margin-top: .17rem; }
.comparison-link { display: flex; align-items: center; gap: .32rem; min-height: 44px; font-weight: 650; font-size: 1rem; text-underline-offset: .2em; text-decoration-color: #99b3a3; overflow-wrap: anywhere; }
.comparison-link:hover { text-decoration-color: var(--paper); }
.compare-budget { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .34rem; margin-top: .42rem; color: var(--muted); font-size: .97rem; }
.sheet-dialog { width: min(52rem, calc(100% - 24px)); max-width: calc(100% - 24px); max-height: calc(100% - 24px); padding: clamp(12px, 2vw, 22px); border: 1px solid #9ca99d; border-radius: .55rem; color: var(--ink); background: var(--paper); box-shadow: 0 10px 48px #1f2a2e4f; overscroll-behavior: contain; }
.sheet-dialog[open] { animation: open-sheet .2s ease-out both; }
.sheet-dialog::backdrop { background: #162821bd; }
.sheet-dialog-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.sheet-dialog-header h2 { font-size: clamp(1.28rem, 3vw, 2.05rem); }
.sheet-dialog figure img { display: block; width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; background: #fff; }
@keyframes open-sheet { from { opacity: .4; transform: translateY(.35rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.library { padding: clamp(1.65rem, 3vw, 2.1rem) 0 4.8rem; border-top: 1px solid var(--rule); }
.library-title h2, .starter-copy h2 { font-size: clamp(2.35rem, 4.4vw, 3.85rem); margin-top: .51rem; }
.library-toolbar { display: flex; justify-content: space-between; gap: .8rem 1rem; align-items: center; margin: 1.45rem 0 1.15rem; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.filters button, .view-controls button { padding: .48rem .85rem; min-height: 44px; background: transparent; border: 1px solid var(--control-rule); color: var(--pine-dark); font-weight: 650; font-size: 1rem; border-radius: .32rem; }
.filters button:hover, .view-controls button:hover { border-color: var(--pine); }
.filters button[aria-pressed="true"], .view-controls button[aria-pressed="true"] { background: var(--pine-dark); border-color: var(--pine-dark); color: var(--sheet); }
.library-search { display: flex; align-items: center; gap: .67rem; width: min(16rem, 100%); min-height: 44px; padding: .1rem .8rem; border: 1px solid var(--control-rule); border-radius: .32rem; color: var(--pine-dark); background: #fffcf4; }
.library-search:focus-within { outline: 2px solid var(--rust); outline-offset: 2px; }
.library-search input { color: var(--ink); min-width: 0; width: 100%; min-height: 40px; background: transparent; border: 0; font-size: 1rem; padding-inline: 0; }
.library-search input:focus { outline: none; }
.library-search input::placeholder { color: var(--muted); opacity: 1; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(18rem, (100% - 2.04rem) / 3)), 1fr)); gap: 1.02rem; }
.library-title + .library-toolbar[hidden] + p + .resource-grid { margin-top: 1.3rem; }
.tone-sage { --tone: #dfe8d9; --tone-dark: #5b7661; --tone-back: #c0ceb9; }
.tone-sand { --tone: #f0e4cb; --tone-dark: #8b6942; --tone-back: #debe94; }
.tone-blue { --tone: #dce8ed; --tone-dark: #547183; --tone-back: #bdcfdc; }
.tone-lilac { --tone: #ebe2e7; --tone-dark: #765b70; --tone-back: #d4bccb; }
.resource-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fffcf5; border: 1px solid var(--rule); border-radius: .49rem; text-decoration: none; transition: border-color .18s, box-shadow .18s; }
.resource-card:hover { border-color: var(--tone-dark); box-shadow: 0 5px 16px #202c2b11; }
.card-art { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; align-content: end; min-height: 10.25rem; background-color: var(--tone); background-image: radial-gradient(#3b504b30 .7px, transparent .9px); background-size: 9px 9px; border-bottom: 1px solid var(--rule); }
.mini-stack { position: relative; width: 68%; max-width: 17rem; height: 8.65rem; bottom: -.45rem; transform: rotate(-6deg); transition: transform .26s ease; }
.tone-sand .mini-stack { transform: rotate(5deg); }
.tone-blue .mini-stack { transform: rotate(-4deg); }
.resource-card:hover .mini-stack { transform: translateY(-5px) rotate(0deg); }
.mini-backing { position: absolute; background: var(--tone-back); inset: 3% -6% -4% 10%; transform: rotate(13deg); border: 1px solid #4b52402e; }
.tone-sand .mini-backing { transform: rotate(-13deg); inset-inline: -6% 13%; }
.mini-sheet-image { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 1px solid #697d7336; background: var(--sheet); box-shadow: 0 5px 13px #20382d26; }
.card-content { position: relative; flex: 1; min-height: 9.75rem; padding: 1.03rem 3.2rem 1.17rem 1.12rem; }
.card-type { display: block; color: var(--pine); font-size: .68rem; }
.card-content h3 { margin-block: .38rem .45rem; font-size: clamp(1.25rem, 2.15vw, 1.68rem); }
.card-content p { color: var(--muted); font-size: .96rem; line-height: 1.35; }
.card-arrow { display: grid; position: absolute; place-items: center; right: .89rem; bottom: .9rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #c3cabc; color: var(--pine-dark); font-size: 1.05rem; transition: background-color .18s, color .18s; }
.resource-card:hover .card-arrow { color: var(--sheet); background: var(--pine-dark); }
.library-more { display: flex; justify-content: center; margin-top: 1.45rem; }
.empty-state { border: 1px dashed #a8b1a5; border-radius: .35rem; padding: 2rem; text-align: center; }
.empty-state h3 { font-size: 1.65rem; }
.empty-state p { color: var(--muted); margin-block: .45rem .9rem; }

.starter-section { border-block: 1px solid #c6cfc3; background-color: #e4eade; background-image: linear-gradient(#889c8a1c 1px, transparent 1px), linear-gradient(90deg, #889c8a1c 1px, transparent 1px); background-size: 22px 22px; }
.starter-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: center; gap: clamp(2.5rem, 8vw, 8rem); padding-block: clamp(2.7rem, 6vw, 5.75rem); }
.section-answer { color: var(--muted); margin-top: .65rem; }
.editorial-credit { margin-top: .9rem; color: var(--muted); font-size: .94rem; }
.editorial-credit a { color: var(--pine-dark); text-underline-offset: .17em; }
.starter-actions { gap: .5rem 1rem; }
.starter-steps { margin: 1.05rem 0 0; padding-left: 1.55rem; color: var(--muted); }
.starter-steps li { margin-bottom: .62rem; padding-left: .22rem; }
.starter-steps li::marker { font-family: var(--mono); color: var(--rust); }
.starter-steps strong { color: var(--ink); }
.home-faq { padding-block: clamp(3.2rem, 6vw, 5.75rem); max-width: 56rem; }
.file-box { width: 100%; min-width: 0; border: 1px solid var(--rule); border-radius: .49rem; padding: clamp(1.2rem, 2.4vw, 1.78rem); background: var(--sheet); box-shadow: 0 4px 12px #24392d0a; }
.file-box h2 { font-size: clamp(1.55rem, 2.7vw, 2.05rem); }
.file-intro { margin-top: .44rem; color: var(--muted); }
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.format-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; }
.check-item input { accent-color: var(--pine); width: 1.13rem; height: 1.13rem; margin: 0; flex: none; }
.format-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; margin-block: 1.02rem .5rem; }
.format-link { display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 44px; padding: .32rem .49rem; border: 1px solid #c8cabc; border-radius: .25rem; color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 650; line-height: 1.2; }
.format-link:hover { background: #e5ede4; border-color: var(--pine); color: var(--pine-dark); }
.format-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.format-link small { display: block; color: var(--muted); font-size: .76rem; font-weight: 400; }
.format-link .download-icon { margin-left: auto; color: var(--pine); font-family: var(--mono); }
.format-note { margin-top: .5rem; color: var(--muted); font-size: .85rem; }
.format-mark { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: .13rem; color: #fff; background: var(--pine); font-family: var(--mono); font-size: .68rem; font-weight: 400; }
.mark-docs, .mark-word { background: #315977; }
.mark-pdf { background: var(--rust); }

.site-footer { background: var(--pine-dark); color: var(--paper); }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 2rem; padding-block: 3.15rem 3.45rem; }
.site-footer .brand { color: var(--paper); }
.site-footer .brand-mark { background: var(--paper); color: var(--pine-dark); }
.site-footer .brand-dot { color: #e49c80; }
.footer-intro p { margin-top: .83rem; color: #d5e1d9; max-width: 17rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; }
.footer-links .mono { color: #c2d3c9; margin-bottom: .3rem; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-footer :focus-visible { outline-color: var(--kraft); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; font-size: .95rem; color: var(--muted); margin-bottom: 1.05rem; }
.breadcrumb a { color: var(--pine); text-underline-offset: .21em; }
.resource-header { padding-block: 2rem 1.65rem; }
.resource-header h1, .prose-page h1 { font-size: clamp(2.6rem, 5.5vw, 5.25rem); max-width: 60rem; line-height: 1; }
.answer { max-width: 47rem; color: var(--muted); margin-top: .88rem; font-size: 1.18rem; line-height: 1.44; }
.resource-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.15rem; margin-top: 1.1rem; }
.resource-page main > .wrap { container: resource / inline-size; }
.resource-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18.7rem, 24.25rem); gap: clamp(1.3rem, 4vw, 3.35rem); align-items: start; }
.resource-workspace .file-box { margin-top: 3.65rem; }
.cruise-workspace { grid-template-areas: "preview bags" "preview examples" "preview file"; grid-template-rows: auto auto 1fr; row-gap: 1rem; }
.cruise-workspace .checklist-preview { grid-area: preview; }
.cruise-workspace .file-box { grid-area: file; margin-top: 0; }
.cruise-bags { grid-area: bags; margin-top: 3.65rem; padding: 1.05rem; border: 1px solid var(--rule); border-radius: .49rem; background: var(--sheet); }
.cruise-bags h2 { font-size: clamp(1.48rem, 2.4vw, 2.1rem); margin-bottom: .74rem; }
.cruise-bags img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: .25rem; background: #ece4d5; }
.cruise-bag-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .72rem; margin-top: .85rem; }
.cruise-bag-notes > div { border-top: 1px solid var(--rule); padding-top: .5rem; }
.cruise-bag-notes h3 { color: var(--pine-dark); font-size: 1.03rem; line-height: 1.2; }
.cruise-bag-notes h3 .phase-icon { margin-right: .18rem; }
.cruise-bag-notes p { color: var(--muted); font-size: 1rem; line-height: 1.4; margin-top: .32rem; }
.cruise-bags > .text-link { margin-top: .43rem; font-size: .94rem; }
.cruise-bag-examples { grid-area: examples; padding: 1.05rem; border: 1px solid var(--rule); border-radius: .49rem; background: #f7efdf; container: bag-examples / inline-size; }
.cruise-bag-examples h2 { font-size: clamp(1.48rem, 2.4vw, 2.1rem); margin-bottom: .26rem; }
.bag-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .52rem; border-top: 1px solid #d3cbb9; padding-block: .62rem; }
.bag-flow:first-of-type { margin-top: .56rem; }
.bag-flow-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .23rem; min-width: 0; }
.bag-flow-items > span:last-child { grid-column: 1 / -1; color: var(--ink); font-size: .95rem; line-height: 1.32; overflow-wrap: anywhere; }
.bag-vignette { aspect-ratio: 3/2; background: #f2e6cd url("/assets/packing-objects.webp") no-repeat; background-size: 200% 200%; border-radius: .16rem; }
.bag-vignette-docs { background-position: left top; }
.bag-vignette-charger { background-position: right top; }
.bag-vignette-bottle { background-position: left bottom; }
.bag-vignette-layer { background-position: right bottom; }
.bag-flow-arrow { color: var(--rust); font-weight: 650; font-size: 1.25rem; }
.bag-flow-destination strong { color: var(--pine-dark); font: 600 1.03rem/1.15 var(--serif); overflow-wrap: anywhere; }
.bag-flow-destination p { color: var(--muted); font-size: .95rem; line-height: 1.35; margin-top: .14rem; }
@container bag-examples (max-width: 14rem) {
  .bag-flow { grid-template-columns: minmax(0, 1fr); gap: .28rem; }
  .bag-flow-items { max-width: 11rem; }
  .bag-flow-arrow { justify-self: start; transform: rotate(90deg); }
}
.preview-bar { display: flex; justify-content: space-between; gap: .35rem .8rem; flex-wrap: wrap; align-items: center; min-height: 3.65rem; padding-bottom: .5rem; }
.preview-bar h2 { font-size: clamp(1.28rem, 2vw, 1.65rem); }
.preview-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.view-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.view-controls button { padding: .35rem .56rem; }
.quiet-button { min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem; background: transparent; color: var(--pine-dark); border: 1px solid var(--control-rule); border-radius: .26rem; font-size: 1rem; font-weight: 650; }
.quiet-button:is(:disabled, [aria-disabled="true"]) { color: var(--muted); opacity: .7; }
.quiet-button:hover:not(:disabled, [aria-disabled="true"]) { background: #dfe7db; border-color: var(--pine); }
.sheet-stage { background: var(--tone); background-image: linear-gradient(#768c8727 1px, transparent 1px), linear-gradient(90deg, #768c8727 1px, transparent 1px); background-size: 18px 18px; padding: clamp(.78rem, 3.75vw, 2.75rem); border: 1px solid #9eaaa257; border-radius: .48rem; min-height: clamp(23rem, 35vw, 29rem); display: grid; align-items: start; }
.template-sheet { box-shadow: 0 9px 24px #24392d1a; }
.template-sheet .sheet-fields { margin-block: 1.14rem; }
.template-sheet .sheet-fields dt, .template-sheet .sheet-table thead { font-size: clamp(.62rem, 1vw, .75rem); }
.template-sheet .sheet-table { font-size: clamp(.73rem, 1.15vw, .95rem); }
.template-sheet .sheet-table :is(td, th) { padding: .58rem .44rem; }
.template-sheet .sheet-table td { height: 2.28rem; }
.template-sheet .sheet-notes p { min-height: 2.2rem; background: repeating-linear-gradient(transparent 0, transparent calc(1.1rem - 1px), #c3d0d9 calc(1.1rem - 1px), #c3d0d9 1.1rem); border-bottom: 0; }
.checklist-stage {
  background: #dee6dd; background-image: linear-gradient(130deg, #edf0e4ad, #ecf0e47c), url("/assets/field-map.webp");
  background-size: auto, max(100%, 32rem) auto; background-repeat: no-repeat; background-position: center top;
  padding: clamp(10px, 2.5vw, 30px); border: 1px solid #aebcaf; border-radius: .53rem;
  container: packing / inline-size;
}
.packing-route { color: var(--pine-dark); padding: .2rem .18rem .8rem; }
.packing-route-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .7rem; margin-bottom: .58rem; }
.packing-route-heading h3 { font-size: clamp(1.38rem, 2.65vw, 2.17rem); }
.packing-route-heading span, .packing-totals { background: #f6f5e8; padding: .23rem .44rem; border-radius: .2rem; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.packing-progress { display: block; width: 100%; height: .48rem; border: 0; border-radius: 1rem; overflow: hidden; background: #c4d0c3; }
.packing-progress::-webkit-progress-bar { background: #c4d0c3; }
.packing-progress::-webkit-progress-value { background: var(--pine); transition: width .26s ease-out; }
.packing-progress::-moz-progress-bar { background: var(--pine); }
.packing-totals { width: fit-content; margin-top: .46rem; }
.packing-route-areas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.7fr); gap: .48rem; margin-top: .65rem; }
.packing-prep, .packing-by-use { min-width: 0; border: 1px solid #9eb1a2; border-radius: .29rem; padding: .54rem .59rem .37rem; background: #f3f2e5; }
.packing-prep { border-color: #ac9f82; background: #f6efdd; }
.packing-route-areas h4 { margin: 0; font-size: .88rem; text-transform: uppercase; }
.packing-prep p { color: var(--muted); font-size: .95rem; line-height: 1.33; margin-top: .15rem; }
.packing-use-stops { margin-top: .4rem; }
.packing-route-areas .packing-stop::after { display: none; }
.packing-stops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); align-items: stretch; margin: .65rem 0 0; }
.packing-stop { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; flex-direction: column; padding: .15rem .22rem .44rem; text-align: center; text-decoration: none; }
.packing-stop:not(:last-child)::after { position: absolute; content: ""; left: 50%; top: 1.42rem; width: 100%; border-top: 2px dashed #778d7e; pointer-events: none; }
.stop-marker { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; z-index: 1; border-radius: 50%; color: var(--pine-dark); background: var(--sheet); border: 1px solid #809989; transition: background .22s, color .22s, transform .22s; }
.packing-stop:is(:hover, :focus-visible) .stop-marker { transform: translateY(-2px); border-color: var(--pine-dark); }
.packing-stop[data-complete] .stop-marker { background: var(--pine); color: #fff; animation: mark-packed .25s ease-out; }
.packing-stop[data-none-applicable] .stop-marker { border-style: dashed; color: var(--muted); }
.packing-stop-prep { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .39rem; text-align: left; padding: .25rem 0; }
.packing-stop-prep .stop-title, .packing-stop-prep .stop-count { margin: 0; }
.packing-stop[data-complete]::after { border-color: var(--pine); }
@keyframes mark-packed { 45% { transform: scale(1.09); } }
.stop-title { font-size: .95rem; font-weight: 650; line-height: 1.2; margin-top: .36rem; overflow-wrap: anywhere; }
.packing-stop:is(:hover, :focus-visible) .stop-title { text-decoration: underline; text-underline-offset: .17em; }
.stop-count { font-size: .86rem; letter-spacing: 0; line-height: 1.2; margin-top: .2rem; }
.phase-icon { display: inline-block; position: relative; width: 1.34rem; height: 1.34rem; flex: none; vertical-align: -.26em; }
.phase-icon::before, .phase-icon::after, .phase-icon i { content: ""; display: block; position: absolute; }
.phase-icon-bag::before { inset: .46rem .1rem .13rem; border: 1.5px solid currentColor; border-radius: .18rem; }
.phase-icon-bag::after { inset: .16rem .48rem .81rem; border: 1.5px solid currentColor; border-bottom: 0; border-radius: .12rem .12rem 0 0; }
.phase-icon-bag i { top: .53rem; bottom: .22rem; inset-inline: .45rem; border-inline: 1px solid currentColor; }
.phase-icon-ship::before { inset: .72rem .04rem .22rem; background: currentColor; clip-path: polygon(0 0, 100% 0, 79% 100%, 19% 100%); }
.phase-icon-ship::after { inset: .39rem .25rem .6rem; border: 1.5px solid currentColor; border-bottom: 0; border-radius: .08rem .08rem 0 0; }
.phase-icon-ship i { top: .17rem; left: .53rem; width: .27rem; height: .27rem; border: 1.5px solid currentColor; border-bottom: 0; }
.phase-icon-pin::before { top: .16rem; left: .27rem; width: .8rem; height: .8rem; transform: rotate(-45deg); border: 1.5px solid currentColor; border-radius: 50% 50% 50% .08rem; }
.phase-icon-pin i { top: .39rem; left: .5rem; width: .34rem; height: .34rem; border-radius: 50%; border: 1.5px solid currentColor; }
.phase-icon-plan::before { inset: .22rem .28rem .13rem; border: 1.5px solid currentColor; border-radius: .11rem; }
.phase-icon-plan::after { top: .48rem; left: .47rem; width: .42rem; height: .23rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.phase-icon-plan i { top: .12rem; left: .51rem; width: .32rem; height: .12rem; background: currentColor; }
.checklist-sheet { box-shadow: 0 5px 20px #24392d24; border-radius: .34rem; padding: clamp(12px, 2.4vw, 22px); }
.checklist-print-title, .checklist-print-legend, .packing-print-state { display: none; }
.checklist-storage { border-left: 2px solid #839787; padding: .6rem clamp(10px, 2vw, 14px); color: var(--pine-dark); background: #edf1e8; font-size: 1rem; line-height: 1.38; margin-bottom: 1.25rem; }
.checklist-storage p + p { margin-top: .39rem; }
.storage-message { color: var(--rust); }
.checklist-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(16rem, (100% - .9rem) / 2)), 1fr)); gap: 1.15rem .9rem; }
.checklist-group { scroll-margin-top: 1.3rem; border: 1px solid #d9e2dd; background: #fffefa; border-radius: .34rem; padding: .33rem clamp(8px, 1.3vw, 11px) .7rem; }
.checklist-prep { border-color: #d4c5a9; background: #fbf7ed; }
.checklist-group legend { padding: 0 .3rem; color: var(--pine-dark); font: 600 1.21rem/1.18 var(--serif); }
.checklist-group legend .phase-icon { margin-right: .13rem; }
.group-summary { color: var(--muted); font-size: .95rem; line-height: 1.35; min-height: 2.5em; padding: .16rem 0 .45rem; }
.checklist-items { container: items / inline-size; }
.check-entry { --packing-target: max(44px, 3.05rem); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: start; padding-block: 5px; border-bottom: 1px solid #dce5e2; }
.check-item { display: flex; gap: .52rem; align-items: center; min-height: 44px; padding: .34rem 0; cursor: pointer; font-size: 1rem; line-height: 1.28; }
.check-item span { overflow-wrap: anywhere; }
.check-item input:checked + span { color: var(--muted); text-decoration: line-through; }
.check-item:hover { background: #eef2e9; }
.check-entry[data-not-applicable] .check-item { color: var(--muted); background: transparent; cursor: default; }
.packing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.with-note .packing-actions { padding-right: calc(var(--packing-target) + 8px); }
.packing-note { grid-column: 1 / -1; }
.packing-note summary, .remove-packing-item, .packing-na {
  display: grid; place-items: center; min-height: 44px; min-width: var(--packing-target);
  background: var(--sheet); border: 1px solid var(--control-rule); border-radius: .22rem; color: var(--pine-dark); cursor: pointer; list-style: none;
  font-size: .95rem; font-weight: 650; padding: .2rem .3rem; line-height: 1.2;
}
.packing-note summary { position: absolute; top: 5px; right: 0; width: var(--packing-target); }
.packing-note summary::-webkit-details-marker { display: none; }
.packing-note[open] summary, .packing-note summary:hover, .packing-na:hover { background: #deeadf; }
.packing-na[aria-pressed="true"] { color: #fff; background: #6b5540; border-color: #6b5540; }
.packing-note-body { background: #edf2e9; border-left: 2px solid #9cac9c; padding: .51rem clamp(8px, 2vw, 12px); margin: .34rem 0 .38rem; color: var(--pine-dark); font-size: 1rem; line-height: 1.39; overflow-wrap: anywhere; }
.packing-suggestions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .42rem; }
.packing-suggestions button { min-height: 44px; max-width: 100%; padding: .25rem .45rem; background: var(--sheet); color: var(--pine-dark); border: 1px solid var(--control-rule); border-radius: .25rem; font-size: .95rem; overflow-wrap: anywhere; }
.packing-suggestions button:hover { border-color: var(--pine); }
.packing-suggestions button[aria-pressed="true"] { color: #fff; background: var(--pine); border-color: var(--pine); }
.remove-packing-item:hover { text-decoration: underline; }
.checklist-add { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .72rem; }
.checklist-add label { flex-basis: 100%; color: var(--pine-dark); font-size: .95rem; font-weight: 650; }
.checklist-add input { flex: 1 1 8rem; min-width: 0; width: 100%; min-height: 44px; padding: .35rem .48rem; border: 1px solid var(--control-rule); border-radius: .25rem; background: #fff; color: var(--ink); font-size: 1rem; }
.checklist-add input[aria-invalid="true"] { border-color: var(--rust); }
.packing-feedback { color: var(--pine-dark); font-size: .95rem; margin-top: .32rem; overflow-wrap: anywhere; }
.packing-feedback:empty { margin: 0; }
.packing-feedback[data-error] { color: var(--rust); }

@container items (max-width: 13.5rem) {
  .check-entry { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .packing-actions { justify-self: start; }
  .with-note .packing-actions { padding-right: 0; }
  .packing-note summary { position: static; }
}
@container items (max-width: 16rem) {
  .added-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@container packing (max-width: 29rem) {
  .packing-route-areas { grid-template-columns: 1fr; }
  .packing-stop::after { display: none; }
}

.reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 6.8vw, 5.5rem); padding-block: 3.15rem; }
.reading-grid h2, .related h2, .packing-index h2, .faq h2, .prose-body h2 { font-size: clamp(1.67rem, 3.2vw, 2.55rem); margin-bottom: .78rem; }
.instructions > p { color: var(--muted); }
.steps { margin: 1.02rem 0; padding-left: 1.4rem; }
.steps li { padding-left: .2rem; margin-bottom: .48rem; }
.steps li::marker { color: var(--pine); font-family: var(--mono); font-size: .83em; }
.faq-rows { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: .76rem; min-height: 48px; padding: .7rem .05rem; font-weight: 650; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pine); }
.faq details p { padding: 0 1.4rem .9rem 0; color: var(--muted); }
.expand-icon { position: relative; flex: none; width: .88rem; height: .88rem; color: var(--pine); }
.expand-icon::before, .expand-icon::after { content: ""; position: absolute; top: 50%; width: 100%; height: 1px; background: currentColor; }
.expand-icon::after { transform: rotate(90deg); transition: transform .18s; }
details[open] .expand-icon::after { transform: rotate(0); }
.packing-index { padding: 2.7rem 0 0; }
.packing-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .45rem; }
.packing-links a { display: flex; justify-content: space-between; align-items: center; gap: .55rem; min-height: 44px; padding: .38rem .68rem; border: 1px solid var(--rule); border-radius: .25rem; background: #fffaf0; color: var(--pine-dark); text-decoration: none; font-weight: 600; }
.packing-links a:hover { border-color: var(--pine); text-decoration: underline; }
.related { border-top: 1px solid var(--rule); padding-block: 2.6rem 3.9rem; }
.related h2 { margin-bottom: 1.03rem; }
.related .card-art { min-height: 8.2rem; }
.related .mini-stack { height: 6.9rem; }

.guide-article, .prose-page { max-width: 52rem; margin-inline: auto; }
.guide-article { padding-bottom: 3.5rem; }
.guide-article .button { margin-top: 1.18rem; }
.guide-steps { list-style: none; padding: 0; margin: .55rem 0 2.5rem; counter-reset: guide-step; }
.guide-steps li { position: relative; padding: 1.1rem 0 1.15rem 3rem; border-top: 1px solid var(--rule); counter-increment: guide-step; }
.guide-steps li::before { content: counter(guide-step); position: absolute; left: 0; top: 1.15rem; display: grid; width: 1.94rem; height: 1.94rem; place-items: center; border: 1px solid #9daea1; border-radius: 50%; color: var(--pine); font-family: var(--mono); font-size: .85rem; }
.guide-steps h2 { font-size: clamp(1.43rem, 2.5vw, 2.05rem); margin-bottom: .41rem; }
.guide-steps p { color: var(--muted); }
.prose-page { padding-block: clamp(2.35rem, 5vw, 4.85rem); min-height: min(62vh, 35rem); }
.prose-page > .eyebrow { margin-bottom: .7rem; }
.prose-body { margin-top: 1.15rem; max-width: 45rem; font-size: 1.1rem; }
.prose-body h2 { margin-top: 1.53rem; }
.prose-body p + p { margin-top: .68rem; }
.prose-body a:not(.button) { color: var(--pine); text-underline-offset: .2em; }
.prose-body .button, .status-actions { margin-top: 1.15rem; }
.print-root { display: none; }

@media (max-width: 1130px) {
  .hero { gap: 1.7rem; }
  .hero h1 { font-size: clamp(3.75rem, 7.4vw, 5.4rem); }
  .card-content { padding-right: 2.65rem; }
}
@media (max-width: 900px) {
  .header-inner { gap: .85rem; }
  .hero { gap: 1.45rem; }
  .hero h1 { font-size: clamp(3.1rem, 7.8vw, 4.42rem); }
  .resource-workspace { gap: 1.12rem; }
}
@container resource (max-width: 49rem) {
  .resource-workspace { grid-template-columns: minmax(0, 1fr); }
  .resource-workspace .file-box { margin-top: 0; }
  .cruise-workspace { grid-template-areas: "bags" "preview" "examples" "file"; grid-template-rows: auto; }
  .cruise-bags { margin-top: 0; }
  .cruise-bags img { max-height: 18rem; object-fit: contain; }
}
@container header (max-width: 47rem) {
  .header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; min-height: 3.75rem; padding-block: .25rem; gap: 0 .65rem; }
  .desktop-nav, .header-search { display: none; }
  .mobile-nav { display: block; }
}
@media (max-width: 720px) {
  .hero { gap: 1.65rem; padding-top: 2.15rem; padding-bottom: 2.8rem; }
  .hero h1 { font-size: clamp(3.1rem, 9vw, 4.5rem); }
  .hero-stage { gap: 1.25rem; }
  .hero-paper { animation: none; }
  .answer { font-size: 1.08rem; }
  .library-toolbar { align-items: flex-start; flex-direction: column; }
  .library-search { width: 100%; max-width: 26rem; }
  .sheet-stage { min-height: 24rem; }
  .reading-grid { padding-block: 2.4rem; }
  .footer-inner { padding-block: 2.25rem; gap: 1.3rem; }
}
@media (max-width: 480px) {
  .brand { font-size: 1.26rem; }
  .hero h1 { font-size: 2.35rem; margin-top: .75rem; }
  .hero-answer { margin-top: 1.02rem; font-size: 1.09rem; }
  .hero-actions { margin-top: 1.13rem; column-gap: .75rem; }
  .hero-actions .button { padding-inline: .7rem; gap: .47rem; }
  .hero-stage { padding-bottom: 1rem; }
  .hero-paper { width: 100%; }
  .sheet-comparison { padding-top: 1.55rem; }
  .comparison-board { padding: .28rem; }
  .comparison-card { padding: .75rem; gap: .44rem; }
  .comparison-thumbnail { aspect-ratio: 1.6; padding: .55rem; }
  .comparison-access > div { padding: .48rem .55rem; }
  .library { padding-bottom: 3.2rem; }
  .filters button { padding-inline: .55rem; }
  .card-art { min-height: 9.45rem; }
  .mini-stack { height: 7.75rem; }
  .card-content { min-height: 0; }
  .resource-header { padding-block: 1.1rem .95rem; }
  .breadcrumb { margin-bottom: .73rem; }
  .template-sheet { padding: .8rem .62rem; }
  .template-sheet .sheet-table :is(td, th) { padding: .48rem .21rem; }
  .template-sheet .sheet-fields { margin-block: .76rem; }
  .template-sheet .sheet-fields dt, .template-sheet .sheet-table thead { font-size: .58rem; }
  .sheet-stage { padding: .65rem; min-height: 23rem; }
  .cruise-bags, .cruise-bag-examples { padding: .82rem; }
  .cruise-bags img { max-height: none; }
}
@media (max-width: 355px) {
  .hero h1 { font-size: 2.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@page { size: letter portrait; margin: .55in; }
@media print {
  html, body { background: #fff; color: #000; }
  html { font-size: 16px; }
  body { font-size: 11pt; }
  body > .site-header, body > .site-footer, .skip-link, .preview-bar, .file-box, .reading-grid, .related, .packing-index,
  .cruise-bags, .cruise-bag-examples, .packing-route, .checklist-storage, .group-summary, .packing-note, .checklist-add,
  .packing-feedback, .packing-actions, .checklist-group .phase-icon, .sheet-dialog, .working-sheet-help, .readable-days,
  [data-sheet-entry] { display: none !important; }
  .wrap { width: 100%; max-width: none; }
  body.printing > :not(.print-root) { display: none !important; }
  body.printing > .print-root { display: block; }
  .resource-page .resource-header { display: none; }
  .resource-workspace, .sheet-stage, .checklist-stage { display: block; padding: 0; border: 0; background: transparent; min-height: 0; }
  .checklist-items { container-type: normal; }
  .sheet, .hero-sheet { padding: 0; transform: none; box-shadow: none; border: 0; background: white; }
  .hero-paper .hero-sheet { transform: none !important; }
  .sheet-stamp { transform: none; }
  .sheet-entry-value { display: block; }
  .hero-sheet .sheet-table { display: table !important; }
  .working-sheet .sheet-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .working-sheet .sheet-fields dd { border-bottom: 1px solid #b6c6d4; }
  .sheet-table th, .sheet-table td { border-color: #99a9b0; }
  .sheet-table tr, .checklist-group { break-inside: avoid; }
  .sheet-table thead { display: table-header-group; }
  .checklist-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.1rem; }
  .checklist-groups:has(.check-entry:nth-child(16)) { display: block; }
  .checklist-groups:has(.check-entry:nth-child(16)) .checklist-group { break-inside: auto; margin-bottom: .8rem; }
  .checklist-print-title { display: flex; }
  .checklist-print-legend { display: block; color: #35423c; margin-top: .42rem; }
  .checklist-group { border: 0; padding: 0; background: transparent; }
  .checklist-group legend { padding: 0; }
  .check-entry { grid-template-columns: minmax(0, 1fr) auto; padding-block: 0; break-inside: avoid; }
  .check-item { min-height: 24px; padding-block: .2rem; }
  .check-item input { appearance: none; border: 1px solid #44534c; border-radius: .08rem; width: 12px; height: 12px; }
  .check-item input:checked::after { content: "✓"; display: block; font: 700 11px/10px system-ui; }
  .check-item:hover { background: transparent; }
  .check-item input:checked + span { color: #262e2b; text-decoration: none; }
  .check-entry[data-not-applicable] .packing-print-state { display: block; align-self: center; font: 9pt var(--mono); color: #473f35; padding-inline: .28rem; }
  .homepage .sheet-comparison, .homepage .library, .homepage .starter-section, .homepage .home-faq,
  .homepage .hero-copy, .homepage .hero-preview-tools, .homepage .sample-link, .sheet-backing, .paperclip { display: none !important; }
  .homepage .hero, .homepage .hero-stage { display: block; padding: 0; min-height: 0; background: none; border: 0; }
  .homepage .hero-paper { width: 100%; animation: none; }
}