/* reiwa.day — Muji functional precision
   Palette: Unbleached Stationery
   Typography: Noto Sans JP / Noto Sans
*/

:root {
    --cotton-white: #F7F5F0;   /* primary background */
    --pencil-lead:  #3C3C3C;   /* primary text */
    --paper-edge:   #8C8780;   /* labels, secondary */
    --cotton-thread:#B0A898;   /* rules, dividers */
    --linen-back:   #E8E4DC;   /* section background */
    --kraft-band:   #D6D0C4;   /* belly-band accent */
    --pressed-board:#C8C0B0;   /* trim marks */
    --pure-washi:   #FAFAF7;   /* alt background */

    --font-jp: "Noto Sans JP", "Noto Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    --font-latin: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;

    --col-width: 600px;
    --col-pad: 40px;
    --col-pad-wide: 40px;
    --rule-color: var(--cotton-thread);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    color: var(--pencil-lead);
    background-color: var(--cotton-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

/* ---------- Viewport sections ---------- */

.viewport {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 120px 0;
}

.viewport--today {
    min-height: 100vh;
    background-color: var(--pure-washi);
    align-items: center;
    padding: 0;
}

.viewport--practice {
    background-color: var(--cotton-white);
    padding-top: 160px;
    padding-bottom: 160px;
}

.viewport--record {
    background-color: var(--linen-back);
    padding-top: 160px;
    padding-bottom: 160px;
}

.viewport--objects {
    background-color: var(--cotton-white);
    padding-top: 160px;
    padding-bottom: 160px;
}

.viewport--tomorrow {
    min-height: 100vh;
    background-color: var(--pure-washi);
    align-items: center;
    padding: 0;
}

/* ---------- Content column ---------- */

.content-column {
    width: 100%;
    max-width: var(--col-width);
    padding-left: var(--col-pad);
    padding-right: var(--col-pad);
    margin: 0 auto;
}

.content-column--wide {
    max-width: 760px;
}

/* ---------- Whitespace blocks ---------- */

.whitespace-block {
    width: 100%;
    height: 160px;
}

.whitespace-block--top {
    height: 180px;
}

.whitespace-block--bottom {
    height: 200px;
}

/* ---------- Section headings ---------- */

.section-heading {
    margin-bottom: 80px;
}

.section-eyebrow {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-edge);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.section-title {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--pencil-lead);
}

/* ---------- Dot markers ---------- */

.dot-marker {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--paper-edge);
    flex-shrink: 0;
}

/* ---------- Rules ---------- */

.rule {
    border: 0;
    border-top: 0.5px solid var(--rule-color);
    background-color: var(--rule-color);
    height: 0.5px;
    margin: 14px 0;
    width: 100%;
}

.rule--bottom {
    margin-top: 40px;
    margin-bottom: 0;
}

/* ---------- Page 1 — Today ---------- */

.today-block {
    text-align: center;
    padding: 40px 0;
}

.today-label {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-edge);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
}

.today-date {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--pencil-lead);
    min-height: 1.5em;
    margin-bottom: 36px;
}

.today-date::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.05em;
    background: var(--pencil-lead);
    vertical-align: -0.15em;
    margin-left: 4px;
    opacity: 1;
    animation: caret-blink 1.1s steps(2, end) infinite;
}

.today-date.is-finished::after {
    display: none;
}

@keyframes caret-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.today-caption {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 13px;
    color: var(--paper-edge);
    letter-spacing: 0.02em;
}

/* ---------- Trim marks (only on Today viewport) ---------- */

.trim-mark {
    position: absolute;
    width: 8px;
    height: 8px;
    pointer-events: none;
}

.trim-mark--tl {
    top: 60px;
    left: calc(50% - var(--col-width) / 2 + var(--col-pad) - 14px);
    border-top: 0.5px solid var(--pressed-board);
    border-left: 0.5px solid var(--pressed-board);
}

.trim-mark--tr {
    top: 60px;
    right: calc(50% - var(--col-width) / 2 + var(--col-pad) - 14px);
    border-top: 0.5px solid var(--pressed-board);
    border-right: 0.5px solid var(--pressed-board);
}

.trim-mark--bl {
    bottom: 60px;
    left: calc(50% - var(--col-width) / 2 + var(--col-pad) - 14px);
    border-bottom: 0.5px solid var(--pressed-board);
    border-left: 0.5px solid var(--pressed-board);
}

.trim-mark--br {
    bottom: 60px;
    right: calc(50% - var(--col-width) / 2 + var(--col-pad) - 14px);
    border-bottom: 0.5px solid var(--pressed-board);
    border-right: 0.5px solid var(--pressed-board);
}

/* ---------- Page 2 — The Practice ---------- */

.practice-block {
    margin-bottom: 80px;
}

.practice-block:last-child {
    margin-bottom: 0;
}

.block-label {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-edge);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.block-body {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    color: var(--pencil-lead);
    margin: 18px 0;
}

/* ---------- Page 3 — The Record ---------- */

.record-body {
    position: relative;
    padding-left: 32px;
    border-left: 0.5px solid var(--cotton-thread);
}

.record-rule {
    display: none; /* the left border on .record-body serves as the ruling line */
}

.record-paragraph {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.9;
    color: var(--pencil-lead);
    margin-bottom: 28px;
}

.record-paragraph:last-child {
    margin-bottom: 0;
}

/* ---------- Page 4 — The Objects ---------- */

.objects-grid {
    display: grid;
    grid-template-columns: 280px 280px;
    gap: 40px 40px;
    justify-content: center;
}

.object-cell {
    width: 280px;
}

.object-label {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-edge);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.object-title {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--pencil-lead);
    margin: 16px 0 12px;
}

.object-text {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.85;
    color: var(--pencil-lead);
}

/* ---------- Belly band ---------- */

.belly-band {
    width: 100%;
    background-color: var(--cotton-white);
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.belly-band-strip {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--kraft-band);
}

/* ---------- Page 5 — Tomorrow ---------- */

.tomorrow-block {
    text-align: center;
    padding: 40px 0;
}

.tomorrow-label {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-edge);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.tomorrow-phrase {
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--pencil-lead);
}

/* ---------- Footer ---------- */

.page-footer {
    margin-top: 120px;
    text-align: center;
}

.footer-line {
    font-family: var(--font-latin);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--paper-edge);
    margin-bottom: 6px;
}

.footer-line--small {
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
    .content-column,
    .content-column--wide {
        padding-left: 28px;
        padding-right: 28px;
    }

    .objects-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        justify-content: stretch;
    }

    .object-cell {
        width: 100%;
    }

    .today-date {
        font-size: 24px;
    }

    .section-title {
        font-size: 24px;
    }

    .trim-mark {
        display: none;
    }

    .viewport--practice,
    .viewport--record,
    .viewport--objects {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}

/* ---------- Print ---------- */

@media print {
    html, body {
        background: #ffffff;
        color: #000000;
    }

    .viewport {
        background: #ffffff !important;
        padding: 30px 0 !important;
        page-break-inside: avoid;
        min-height: 0;
    }

    .viewport--today,
    .viewport--tomorrow {
        min-height: 0;
    }

    .belly-band {
        padding: 30px 0;
        background: #ffffff;
    }

    .belly-band-strip {
        background-color: #888888;
    }

    .trim-mark {
        border-color: #aaaaaa !important;
    }

    .today-date::after {
        display: none;
    }

    .rule {
        border-top: 0.5px solid #888888;
        background-color: #888888;
    }

    .record-body {
        border-left-color: #888888;
    }

    .dot-marker {
        background-color: #555555;
    }

    .section-title,
    .object-title,
    .today-date,
    .tomorrow-phrase {
        color: #000000;
    }

    .block-body,
    .object-text,
    .record-paragraph {
        color: #1a1a1a;
    }

    .section-eyebrow,
    .block-label,
    .today-label,
    .tomorrow-label,
    .object-label,
    .footer-line,
    .today-caption {
        color: #555555;
    }
}