/* ABOUTME: Independent friends' scrapbook direction with paper cards and photo collage. */
/* ABOUTME: Decorative tape and paper stay subordinate to readable text and actionable controls. */
:root { --paper: #f1eadb; --surface: #fffdf4; --ink: #514433; --muted: #786b55; --line: #d5c8ad; --accent: #9a4c36; --soft: #ece2c8; --warm: #a95437; --serif: 'Kaiti SC', 'STKaiti', 'Songti SC', Georgia, serif; }
body { background: #ded4bf; }.prototype-bar { background: #514638; }.prototype-bar a { text-decoration: none; font-size: 12px; }.direction-label { letter-spacing: .1em; font-size: 12px; }.demo-controls { padding: 12px 20px; }
.app-surface { background-image: linear-gradient(#c6bda320 1px, transparent 1px); background-size: 100% 32px; }.site-header { height: 91px; border-bottom: 1px dashed #b7a787; }.brand-mark { background: transparent; color: #a45438; font-size: 33px; transform: rotate(-12deg); }.brand strong { font-family: var(--serif); font-size: 29px; }.header-caption { text-align: center; font-size: 9px; letter-spacing: .12em; }
.hero { grid-template-columns: 1fr 46%; gap: 8%; padding: 55px 0 85px; min-height: 490px; }.hero h1 { font-size: clamp(34px, 3.5vw, 53px); line-height: 1.5; font-weight: 500; }.hero-description { max-width: 360px; font-size: 13px; line-height: 2; }.destination-label { background: #ead38c; padding: 3px 13px; width: fit-content; transform: rotate(-3deg); color: var(--ink); margin-top: 24px; }.eyebrow { font-weight: 400; }.trip-meta { gap: 14px; font-size: 11px; }.trip-meta #trip-date { width: 100%; font-size: 10px; }
.hero-visual { position: relative; padding: 0 28px 45px 0; }.hero-image-wrap { margin: 0; border: 0; background: #fffdf6; padding: 11px 11px 0; transform: rotate(-4deg); box-shadow: 2px 7px 13px #725a3822; }.hero-image-wrap::before, .extra-polaroid::before { content: ''; position: absolute; top: -12px; left: 36%; width: 80px; height: 25px; background: #c6b584b0; transform: rotate(5deg); z-index: 1; }.hero-image { aspect-ratio: 1.25; filter: saturate(.72); }.photo-caption { padding: 14px 1px; font-family: var(--serif); font-size: 12px; }.photo-caption span:last-child { display: none; }
.extra-polaroid { position: absolute; right: -17px; bottom: -11px; width: 43%; padding: 8px 8px 11px; background: #fffdf6; box-shadow: 2px 4px 12px #725a3822; transform: rotate(7deg); }.extra-polaroid img { display: block; width: 100%; aspect-ratio: 1.2; object-fit: cover; }.extra-polaroid span { display: block; font-family: var(--serif); font-size: 11px; padding-top: 8px; }.extra-polaroid::before { width: 59px; left: 32%; height: 20px; top: -9px; }
.together-strip { border-top: 1px dashed #b7a787; border-bottom: 1px dashed #b7a787; padding: 17px 0; }.main-tabs { height: 83px; align-items: center; border-bottom: 0; gap: 23px; }.main-tabs button { font-family: var(--serif); font-size: 18px; padding: 8px 13px; }.main-tabs button[aria-current='page'] { background: #e7d49a; border-bottom: 0; transform: rotate(-2deg); }.main-tabs button span { font-family: var(--sans); font-size: 8px; }
.content-layout { padding-top: 17px; grid-template-columns: 192px minmax(0, 1fr); gap: 50px; }.day-button { background: #fff9e8; border: 1px solid #d6c9a9; border-radius: 0; margin-bottom: 6px; padding: 13px 10px; }.day-button.selected { background: #e8d79c; border-color: #cab679; }.day-number { font-style: italic; }.day-button strong { font-size: 11px; }.day-button small { font-family: var(--serif); font-size: 13px; }.sidebar-note { background: #e7dcae; border: 0; border-radius: 0; transform: rotate(-2deg); }.sidebar-note h3 { font-size: 21px; line-height: 1.55; }
.section-heading h2 { font-size: 32px; font-weight: 500; }.section-heading p { font-family: var(--serif); font-size: 14px; }.slot { grid-template-columns: 1fr; gap: 10px; padding-bottom: 30px; }.slot::before { display: none; }.slot-label { font-family: var(--serif); font-size: 18px; padding-top: 0; align-items: center; gap: 4px; color: var(--warm); }.slot-icon { background: transparent; height: 24px; }.slot-label svg { margin-top: 3px; }
.entry { border: 0; border-radius: 2px; padding: 24px 26px 18px; background: #fffdf5; box-shadow: 2px 4px 0 #d7cbb760; margin: 5px 0 15px; }.entry::before { content: ''; position: absolute; width: 55px; height: 15px; left: 35px; top: -6px; background: #cbb98799; transform: rotate(-3deg); }.entry.featured { border: 0; background: #faf2d2; }.entry h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; }.entry-description { line-height: 1.95; }.entry-time { font-size: 10px; }.entry-reference { font-size: 10px; color: var(--accent); display: inline-block; margin-top: 8px; }.add-entry { border: 1px dashed #b7a787; font-size: 11px; background: transparent; }.button { border-radius: 3px; }.primary { background: #98503b; }
.readiness { border: 0; border-radius: 0; background: #e8d9a4; }.readiness-symbol { border-color: #c0aa6c; }.check-table-scroll { border-radius: 0; }.personal-section-title h3 { font-family: var(--serif); font-size: 27px; }.state-button.state-1 { background: #6b7951; border-color: #6b7951; }.legend-state.done { background: #6b7951; border-color: #6b7951; }
@container experience (max-width: 950px) {
  .hero h1 { font-size: 35px; }.hero { gap: 6%; }.content-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }.main-tabs { gap: 12px; }.main-tabs button { padding: 8px 10px; }
}
@container experience (max-width: 650px) {
  .site-header { height: 72px; }.brand strong { font-size: 23px; }.hero { display: flex; padding: 28px 0 52px; gap: 28px; min-height: 0; }.hero h1 { font-size: 37px; }.hero-description { font-size: 12px; }.hero-visual { padding: 0 42px 26px 5px; }.hero-image { aspect-ratio: 1.6; }.extra-polaroid { right: 3px; bottom: -10px; width: 40%; }.photo-caption { font-size: 11px; padding: 12px 0; }.extra-polaroid span { font-size: 9px; }.hero .trip-meta { gap: 17px; font-size: 10px; }.hero .trip-meta #trip-date { width: auto; }
  .main-tabs { gap: 4px; height: 72px; }.main-tabs button { font-size: 16px; padding: 7px 11px; }.content-layout { display: block; padding-top: 17px; }.day-button { padding: 9px 5px; }.day-button strong { font-size: 9px; }.day-button small { font-size: 10px; }.day-number { font-size: 23px; }.section-heading h2 { font-size: 27px; }.section-heading p { font-size: 12px; }.entry { padding: 22px 18px 16px; }.entry h3 { font-size: 19px; }.slot-label { font-size: 18px; }.slot { padding-bottom: 25px; }
}
@container experience (max-width: 360px) { .hero h1 { font-size: 32px; }.hero .trip-meta { gap: 10px; }.hero .trip-meta #trip-date { width: 100%; }.main-tabs button { font-size: 15px; padding: 7px 9px; } }