/* ============================================================
   OMAKASE — A FATHER'S DAY FOR MITCH & BOWEN
   The calm counterpart to BAD Racing.
   Self-contained design system; does not touch styles.css.
   ============================================================ */

:root {
    --washi:      #f7f3ea;   /* warm rice-paper background */
    --washi-deep: #efe8da;   /* slightly deeper panel       */
    --sumi:       #1c1a17;   /* ink black                   */
    --sumi-soft:  #4a443c;   /* softened ink for body text  */
    --stone:      #8c8473;   /* muted stone grey            */
    --ai:         #2f4858;   /* indigo / ai-iro accent      */
    --persimmon:  #b4532a;   /* kaki — quiet vermillion      */
    --gold-leaf:  #a8894f;   /* kintsugi gold               */
    --line:       #d9cfbd;   /* hairline rule               */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cormorant Garamond', 'Shippori Mincho', Georgia, serif;
    background: var(--washi);
    color: var(--sumi);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Faint paper texture via layered gradients (no image needed) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(168,137,79,0.04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(47,72,88,0.04), transparent 45%);
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

/* Small uppercase label, used as section eyebrow */
.label {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--stone);
}

.kanji {
    font-family: 'Shippori Mincho', serif;
    color: var(--persimmon);
}

/* ============================================================
   NAV
   ============================================================ */
.omakase-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    background: rgba(247,243,234,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s ease, background 0.4s ease;
}
.omakase-nav.scrolled {
    border-color: var(--line);
}
.omakase-nav .brand {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--sumi);
    text-decoration: none;
}
.omakase-nav .brand .kanji { margin-right: 10px; font-size: 18px; }
.omakase-nav .nav-links {
    display: flex;
    gap: 34px;
}
.omakase-nav .nav-links a {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sumi-soft);
    text-decoration: none;
    transition: color 0.3s ease;
}
.omakase-nav .nav-links a:hover { color: var(--persimmon); }
@media (max-width: 720px) {
    .omakase-nav .nav-links { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 32px 80px;
    position: relative;
}

.hero .noren {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(64px, 16vw, 150px);
    color: var(--persimmon);
    line-height: 1;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: rise 1.4s ease forwards;
}

.hero h1 {
    font-size: clamp(40px, 8vw, 92px);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 24px;
    opacity: 0;
    animation: rise 1.4s ease 0.2s forwards;
}

.hero .sub {
    font-family: 'Jost', sans-serif;
    font-size: clamp(13px, 2vw, 16px);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 22px;
    opacity: 0;
    animation: rise 1.4s ease 0.4s forwards;
}

.hero .for-whom {
    font-size: clamp(22px, 4vw, 34px);
    font-style: italic;
    color: var(--sumi-soft);
    margin-top: 38px;
    opacity: 0;
    animation: rise 1.4s ease 0.6s forwards;
}

.hero-rule {
    width: 1px;
    height: 70px;
    background: linear-gradient(to bottom, var(--line), transparent);
    margin: 48px auto 0;
    opacity: 0;
    animation: rise 1.4s ease 0.8s forwards;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section.block {
    padding: 110px 0;
    position: relative;
}
section.block.tint {
    background: var(--washi-deep);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.section-head {
    text-align: center;
    margin-bottom: 64px;
}
.section-head h2 {
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 500;
    margin-top: 14px;
    letter-spacing: 0.01em;
}
.section-head p {
    max-width: 620px;
    margin: 22px auto 0;
    font-size: 19px;
    color: var(--sumi-soft);
}

/* ============================================================
   THE INVITATION (intro prose)
   ============================================================ */
.invite {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(20px, 2.6vw, 26px);
    color: var(--sumi-soft);
}
.invite .kanji-large {
    display: block;
    font-family: 'Shippori Mincho', serif;
    font-size: 40px;
    color: var(--persimmon);
    margin-bottom: 28px;
    letter-spacing: 0.2em;
}

/* ============================================================
   THE COURSES (tasting-menu timeline)
   ============================================================ */
.courses {
    max-width: 760px;
    margin: 0 auto;
}
.course {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 28px;
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.course:last-child { border-bottom: none; }
.course .num {
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    color: var(--gold-leaf);
    text-align: right;
}
.course .course-jp {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}
.course h3 {
    font-size: 27px;
    font-weight: 500;
    margin-bottom: 8px;
}
.course p {
    font-size: 18px;
    color: var(--sumi-soft);
}

/* ============================================================
   ARTICLES / EDITORIAL
   ============================================================ */
.articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.article-card {
    background: var(--washi);
    border: 1px solid var(--line);
    padding: 38px 34px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease, border-color 0.5s ease;
}
.article-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -28px rgba(28,26,23,0.45);
    border-color: var(--gold-leaf);
}
.article-card .a-num {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    color: var(--gold-leaf);
    margin-bottom: 22px;
}
.article-card h3 {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 14px;
}
.article-card p {
    font-size: 17px;
    color: var(--sumi-soft);
    flex: 1;
}
.article-card .more {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--persimmon);
    margin-top: 26px;
}
.article-card.placeholder {
    border-style: dashed;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: var(--stone);
}

/* ============================================================
   DETAILS / RESERVATION
   ============================================================ */
.details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    max-width: 880px;
    margin: 0 auto;
}
.detail {
    background: var(--washi);
    padding: 40px 34px;
    text-align: center;
}
.detail .d-label {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 14px;
}
.detail .d-value {
    font-size: 26px;
    font-weight: 500;
}
.detail .d-sub {
    font-size: 16px;
    color: var(--sumi-soft);
    margin-top: 6px;
}

/* ============================================================
   COUNTDOWN — quiet version
   ============================================================ */
.countdown-quiet {
    text-align: center;
}
.countdown-quiet .cd {
    display: inline-flex;
    gap: 40px;
    margin-top: 10px;
}
.countdown-quiet .cd-item .n {
    font-family: 'Shippori Mincho', serif;
    font-size: clamp(40px, 8vw, 68px);
    color: var(--ai);
    line-height: 1;
}
.countdown-quiet .cd-item .l {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 12px;
}
@media (max-width: 520px) {
    .countdown-quiet .cd { gap: 22px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.omakase-footer {
    padding: 70px 0 50px;
    text-align: center;
    border-top: 1px solid var(--line);
}
.omakase-footer .seal {
    font-family: 'Shippori Mincho', serif;
    font-size: 34px;
    color: var(--persimmon);
    margin-bottom: 18px;
}
.omakase-footer p {
    font-size: 16px;
    color: var(--sumi-soft);
}
.omakase-footer .back {
    display: inline-block;
    margin-top: 26px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.omakase-footer .back:hover {
    color: var(--persimmon);
    border-color: var(--persimmon);
}

/* ============================================================
   ARTICLE PAGES (shared by all Writings)
   ============================================================ */
.article {
    max-width: 720px;
    margin: 0 auto;
    padding: 160px 32px 120px;
    position: relative;
    z-index: 1;
}
.article .eyebrow { text-align: center; margin-bottom: 20px; }
.article h1 {
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 18px;
}
.article .byline {
    text-align: center;
    font-style: italic;
    color: var(--stone);
    font-size: 19px;
    margin-bottom: 50px;
}
.article .lead {
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    color: var(--persimmon);
    text-align: center;
    margin: 0 auto 50px;
    letter-spacing: 0.18em;
}
.article h2 {
    font-size: 30px;
    font-weight: 500;
    margin: 52px 0 18px;
}
.article p {
    font-size: 21px;
    color: var(--sumi-soft);
    margin-bottom: 28px;
}
.article p .drop {
    font-family: 'Shippori Mincho', serif;
    color: var(--sumi);
}
.article em { color: var(--sumi); }
.article hr {
    border: none;
    border-top: 1px solid var(--line);
    width: 80px;
    margin: 56px auto;
}
.article .signoff {
    text-align: center;
    font-style: italic;
    color: var(--stone);
    font-size: 18px;
}
/* Definition list for glossary-style pages */
.article .term {
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.article .term:last-child { border-bottom: none; }
.article .term .jp {
    font-family: 'Shippori Mincho', serif;
    font-size: 26px;
    color: var(--persimmon);
    margin-right: 14px;
}
.article .term .romaji {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
}
.article .term .def {
    font-size: 19px;
    color: var(--sumi-soft);
    margin-top: 10px;
}
.article-back {
    text-align: center;
    margin-top: 56px;
}

/* ============================================================
   HERO VENUE LINE
   ============================================================ */
.hero .venue {
    font-family: 'Jost', sans-serif;
    font-size: clamp(11px, 1.6vw, 13px);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold-leaf);
    margin-top: 30px;
    opacity: 0;
    animation: rise 1.4s ease 0.55s forwards;
}
.hero .venue a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }

/* ============================================================
   WHAT TO EXPECT
   ============================================================ */
.expect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    max-width: 980px;
    margin: 0 auto;
}
.expect-item {
    background: var(--washi);
    padding: 40px 32px;
}
.expect-item .ei-jp {
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    color: var(--gold-leaf);
    margin-bottom: 16px;
    display: block;
}
.expect-item h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
}
.expect-item p {
    font-size: 16px;
    color: var(--sumi-soft);
    line-height: 1.6;
}

/* ============================================================
   PRAISE / ACCOLADES
   ============================================================ */
.praise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    max-width: 820px;
    margin: 0 auto 56px;
}
.accolade {
    text-align: center;
    padding: 40px 28px;
    border: 1px solid var(--line);
    background: var(--washi);
}
.accolade .a-source {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 16px;
}
.accolade .a-honor {
    font-family: 'Shippori Mincho', serif;
    font-size: 30px;
    color: var(--ai);
    line-height: 1.2;
}
.accolade .a-note {
    font-size: 16px;
    color: var(--sumi-soft);
    margin-top: 10px;
}
.pull-quote {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.pull-quote .pq-mark {
    font-family: 'Shippori Mincho', serif;
    font-size: 56px;
    color: var(--gold-leaf);
    line-height: 0.4;
    display: block;
    margin-bottom: 18px;
}
.pull-quote blockquote {
    font-size: clamp(22px, 3vw, 30px);
    font-style: italic;
    color: var(--sumi);
    line-height: 1.5;
}
.pull-quote cite {
    display: block;
    font-family: 'Jost', sans-serif;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 26px;
}
.praise-note {
    text-align: center;
    font-size: 13px;
    color: var(--stone);
    font-style: italic;
    margin-top: 48px;
}

/* ============================================================
   FUN FACT BAND
   ============================================================ */
.fact {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.fact .fact-jp {
    font-family: 'Shippori Mincho', serif;
    font-size: 42px;
    color: var(--persimmon);
    letter-spacing: 0.2em;
    margin-bottom: 26px;
}
.fact .fact-body {
    font-size: clamp(22px, 3vw, 30px);
    font-style: italic;
    color: var(--sumi);
    line-height: 1.5;
}
.fact .fact-source {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stone);
    margin-top: 28px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}