/* ============================================================ HONKAKU BENCH — stylesheet A detective / honkaku-noir theme: ink-dark UI, brass accents, parchment "case file" reading surfaces. ============================================================ */ :root { --bg: #030406; --surface: #08090e; --surface-2: #0d0f15; --surface-3: #13161f; --text: #dbd6cc; --muted: #8a9099; --faint: #52585f; --accent: #c8a035; /* amber lamp / brass */ --accent-dim:#7a5e18; --blood: #b03530; /* deep red */ --green: #4e9a5c; --border: rgba(255,255,255,.06); --border-2: rgba(255,255,255,.10); --parchment: #d8d0b5; --parchment-2:#ccc4a6; --ink: #1e190f; --ink-muted: #56503c; --shadow: 0 16px 64px rgba(0,0,0,.75); --shadow-sm: 0 4px 20px rgba(0,0,0,.6); --glow: 0 0 40px rgba(200,160,53,.08); --radius: 14px; --maxw: 1120px; --font-display: "HelveticaNeue-Thin", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; --font-ui: "HelveticaNeue-Thin", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; --font-read: "HelveticaNeue-Thin", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } /* Snap layout — only activated on pages that add class="snap-layout" to */ html.snap-layout { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100%; scroll-padding-top: 64px; /* account for fixed nav */ } html.snap-layout body { height: 100%; } body { margin: 0; background: transparent; color: var(--text); font-family: var(--font-ui); font-size: 17px; font-weight: 100; line-height: 1.65; letter-spacing: 0.015em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Atmospheric lamp + vignette layer */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* heavy corner vignette */ radial-gradient(ellipse 130% 90% at 50% 50%, transparent 35%, rgba(0,0,0,.88) 100%), /* single amber lamp from top-center */ radial-gradient(ellipse 900px 700px at 50% -8%, rgba(200,158,50,.10), transparent 65%), /* faint blood-red from lower-right */ radial-gradient(ellipse 700px 500px at 102% 105%, rgba(176,53,48,.07), transparent 55%); } /* Film grain overlay */ body::after { content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 9998; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.035; animation: grain 1.2s steps(3) infinite; } @keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,-6%); } 40% { transform: translate(6%,3%); } 60% { transform: translate(-3%,7%); } 80% { transform: translate(5%,-4%); } 100%{ transform: translate(-2%,5%); } } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: #e0be5a; text-shadow: 0 0 12px rgba(200,160,53,.35); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } .narrow { max-width: 820px; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; backdrop-filter: blur(14px) saturate(0.6); background: rgba(2,3,5,.9); border-bottom: 1px solid rgba(255,255,255,.05); box-shadow: 0 1px 30px rgba(0,0,0,.7); } /* push content below fixed nav on non-snap pages */ html:not(.snap-layout) main { padding-top: 64px; } .nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 1.18rem; letter-spacing: .04em; color: var(--text); display: flex; align-items: center; gap: 10px; white-space: nowrap; } .brand .mag { width: 1.6em; height: 1.6em; object-fit: contain; flex-shrink: 0; } .brand b { color: var(--accent); font-weight: 100; } .nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; } .nav-links a { color: var(--muted); font-size: .93rem; font-weight: 100; letter-spacing: .01em; } .nav-links a:hover { color: var(--text); } .nav-links a.cta { color: var(--bg); background: var(--accent); padding: 8px 16px; border-radius: 999px; font-weight: 100; } .nav-links a.cta:hover { background: #ecca6f; } .nav-toggle { display: none; } /* ---------- Hero ---------- */ .hero { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; display: flex; align-items: center; padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 105deg, transparent 0px, transparent 38px, rgba(200,158,50,.018) 38px, rgba(200,158,50,.018) 40px ); z-index: 0; } .hero .wrap { position: relative; z-index: 1; width: 100%; } /* Scroll hint */ .scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--faint); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; pointer-events: none; user-select: none; animation: hint-bob 2.6s ease-in-out infinite; } @keyframes hint-bob { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .45; } 50% { transform: translateX(-50%) translateY(7px); opacity: .85; } } /* ---------- Full-page snap cards ---------- */ .snap-page { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; display: flex; align-items: center; padding: 64px 0; } .snap-card { background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%); border: 1px solid var(--border-2); border-radius: 20px; box-shadow: 0 32px 96px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.05); padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 48px); width: 100%; max-width: var(--maxw); margin: 0 auto; position: relative; overflow: hidden; } .snap-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(200,160,53,.4) 40%, rgba(200,160,53,.4) 60%, transparent 100%); } .eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); font-weight: 100; margin-bottom: 22px; border: 1px solid rgba(200,160,53,.22); border-radius: 999px; padding: 6px 16px; background: rgba(200,160,53,.04); text-shadow: 0 0 20px rgba(200,160,53,.4); } .hero h1 { font-family: var(--font-display); font-weight: 100; font-size: clamp(2.4rem, 6vw, 4.3rem); line-height: 1.04; margin: 0 0 22px; letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0,0,0,.8); } /* First-visit reveal: hero content hidden until env overlay dismisses */ body.hero-animate .hero .wrap { opacity: 0; transition: opacity 1.1s ease; } body.hero-animate.hero-revealed .hero .wrap { opacity: 1; } .hero h1 .hl { color: var(--accent); } .hero p.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 760px; margin: 0 auto 18px; line-height: 1.55; } .hero .sub { color: var(--faint); font-size: .95rem; max-width: 680px; margin: 0 auto 34px; } .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 999px; font-weight: 100; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: .15s; } .btn-primary { background: var(--accent); color: #1a1407; } .btn-primary:hover { background: #ecca6f; color: #1a1407; transform: translateY(-1px); } .btn-ghost { border-color: var(--border-2); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Section scaffolding ---------- */ section { padding: 64px 0; position: relative; z-index: 1; } .section-tag { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-dim); font-weight: 100; margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-weight: 100; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 16px; line-height: 1.1; } .section-intro { color: var(--muted); max-width: 720px; font-size: 1.06rem; margin-bottom: 8px; } .divider { height: 1px; background: var(--border); border: 0; margin: 0; } /* ---------- Stat cards ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 18px; margin-top: 34px; } .stat { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); } .stat .num { font-family: var(--font-display); font-size: 2.7rem; font-weight: 100; line-height: 1; color: var(--accent); text-shadow: 0 0 30px rgba(200,160,53,.35); } .stat .num.alt { color: var(--text); } .stat .lbl { color: var(--muted); font-size: .9rem; margin-top: 10px; } .stat small { color: var(--faint); } /* ---------- Leaderboard ---------- */ .board-wrap { margin-top: 30px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 60px rgba(0,0,0,.7); } table.board { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 520px; } table.board th, table.board td { padding: 15px 18px; text-align: left; } table.board thead th { background: rgba(8,9,14,.9); color: var(--muted); font-weight: 100; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.07); } table.board tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); background: var(--surface); } table.board tbody tr:last-child { border-bottom: 0; } table.board tbody tr:hover { background: rgba(200,160,53,.04); } table.board td.model { font-weight: 100; display: flex; align-items: center; gap: 10px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } .dot.fable { background: var(--accent); } .dot.opus { background: var(--blood); } .dot.opus46 { background: #d98a5a; } .dot.gpt { background: var(--green); } .dot.gemini { background: #6c8ebf; } .big-num { font-family: var(--font-display); font-weight: 100; font-size: 1.15rem; } .win { color: var(--green); font-weight: 100; } table.board th.col-hero { color: var(--text); } table.board th.col-ref { color: var(--faint); font-size: .72rem; } table.board td.ref { color: var(--faint); font-size: .9rem; } /* score bar cell */ .scorebar { display: flex; align-items: center; gap: 10px; min-width: 160px; } .scorebar .track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .scorebar .fill { height: 100%; border-radius: 999px; } .scorebar .fill.fable { background: var(--accent); } .scorebar .fill.opus { background: var(--blood); } .scorebar .val { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--muted); width: 46px; text-align: right; } /* ---------- Case-study examples ---------- */ .cases { display: grid; gap: 26px; margin-top: 36px; } .case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .case::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(200,160,53,.3), transparent); } .case h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 6px; } .case .case-sub { color: var(--accent-dim); font-weight: 100; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; } .case p { color: var(--text); } .case .muted { color: var(--muted); } .case figure { margin: 18px 0; } .case figure img { border-radius: 10px; border: 1px solid var(--border); background: #fff; } .case figcaption { color: var(--faint); font-size: .85rem; margin-top: 8px; text-align: center; } .quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; } .qbox { border-radius: 10px; padding: 16px 18px; font-family: var(--font-read); font-size: .95rem; line-height: 1.5; } .qbox.fable { background: rgba(216,177,74,.08); border-left: 3px solid var(--accent); } .qbox.opus { background: rgba(192,70,60,.08); border-left: 3px solid var(--blood); } .qbox .who { font-family: var(--font-ui); font-weight: 100; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; } .qbox.fable .who { color: var(--accent); } .qbox.opus .who { color: var(--blood); } .scoreline { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .scoreline .chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; font-size: .95rem; } .scoreline .chip b { font-family: var(--font-display); font-size: 1.2rem; } .scoreline .chip.win b { color: var(--green); } .scoreline .chip.lose b { color: var(--blood); } /* spoiler toggle inside case studies */ details.spoiler { margin-top: 20px; border: 1px dashed rgba(192,70,60,.5); border-radius: 10px; background: rgba(192,70,60,.05); overflow: hidden; } details.spoiler > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 100; font-size: .92rem; color: var(--blood); display: flex; align-items: center; gap: 10px; user-select: none; } details.spoiler > summary::-webkit-details-marker { display: none; } details.spoiler > summary::before { content: "\26A0\FE0F"; } details.spoiler > summary::after { content: "\25BC"; margin-left: auto; font-size: .7rem; transition: transform .2s; } details.spoiler[open] > summary::after { transform: rotate(180deg); } details.spoiler > summary:hover { background: rgba(192,70,60,.08); } details.spoiler .spoiler-body { padding: 4px 22px 22px; } /* ---------- Puzzle grid (portal) ---------- */ .puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; margin-top: 36px; } .pcard { display: flex; flex-direction: column; background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: .22s ease; color: var(--text); box-shadow: 0 8px 32px rgba(0,0,0,.55); } .pcard:hover { transform: translateY(-4px); border-color: rgba(200,160,53,.25); box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(200,160,53,.1), var(--glow); } .pcard .pcard-top { padding: 22px 22px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pcard .case-no { font-family: var(--font-display); font-size: 2rem; font-weight: 100; color: var(--accent); line-height: 1; } .pcard .diff { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 100; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-2); } .diff.Approachable { color: var(--green); border-color: rgba(95,174,110,.4); } .diff.Tricky { color: #6fb1d8; border-color: rgba(111,177,216,.4); } .diff.Fiendish { color: var(--accent); border-color: rgba(216,177,74,.4); } .diff.Brutal { color: var(--blood); border-color: rgba(192,70,60,.4); } .pcard h3 { font-family: var(--font-display); font-size: 1.32rem; margin: 14px 22px 4px; line-height: 1.15; } .pcard .zh { color: var(--faint); font-size: .85rem; margin: 0 22px 12px; } .pcard .teaser { color: var(--muted); font-size: .95rem; margin: 0 22px 16px; flex: 1; } .pcard .tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 22px 18px; } .tag { font-size: .72rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; } .pcard .pcard-foot { margin-top: auto; padding: 14px 22px; border-top: 1px solid var(--border); color: var(--accent); font-weight: 100; font-size: .92rem; display: flex; justify-content: space-between; align-items: center; } /* AI performance scores on puzzle cards */ .pcard-ai { margin: 0 22px 16px; border-top: 1px solid var(--border); padding-top: 14px; } .pcard-ai-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 100; margin-bottom: 10px; } .pcard-ai-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .pcard-ai-row:last-child { margin-bottom: 0; } .pcard-ai-name { font-size: .78rem; color: var(--muted); width: 62px; flex-shrink: 0; } .pcard-ai-row .scorebar { flex: 1; min-width: 0; } /* Coming-soon placeholder card */ .pcard-soon { opacity: 0.38; pointer-events: none; cursor: default; user-select: none; } .pcard-soon .case-no { color: var(--faint); font-size: 1.6rem; letter-spacing: .04em; } /* ---------- Puzzle page (case file) ---------- */ .case-head { padding: 54px 0 26px; } .back-link { color: var(--muted); font-size: .9rem; } .case-head .case-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; } .case-head .case-no { font-family: var(--font-display); font-size: 1.4rem; font-weight: 100; color: var(--accent); } .case-head h1 { font-family: var(--font-display); font-size: clamp(2rem,5vw,3rem); margin: 6px 0 10px; line-height: 1.08; } .case-head .zh { color: var(--faint); font-family: var(--font-read); } .case-head .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } /* language switcher */ .lang-switch { display: inline-flex; gap: 0; margin-top: 18px; border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang-switch button { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-family: var(--font-ui); font-size: .88rem; font-weight: 100; padding: 8px 18px; letter-spacing: .02em; transition: .15s; border-right: 1px solid var(--border); } .lang-switch button:last-child { border-right: 0; } .lang-switch button:hover { color: var(--text); } .lang-switch button[aria-pressed="true"] { background: var(--accent); color: #1a1407; } /* language panes: only the active one shows */ .lang-pane { display: none; } .lang-pane.active { display: block; } /* CJK reading fonts for Chinese / Japanese case files */ .lang-pane[data-lang="zh"] { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; line-height: 1.95; } .lang-pane[data-lang="ja"] { font-family: "Noto Serif JP", "Source Han Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif; line-height: 1.95; } /* parchment dossier */ .dossier { background: var(--parchment); background-image: /* top-edge shadow / foxing */ linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 100px), /* bottom-edge shadow */ linear-gradient(0deg, rgba(0,0,0,.05) 0%, transparent 80px), /* ruled lines */ repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(33,28,18,.055) 32px), /* faint diagonal grain */ repeating-linear-gradient(135deg, transparent, transparent 40px, rgba(33,28,18,.012) 41px); color: var(--ink); border-radius: var(--radius); padding: 48px clamp(24px, 6vw, 64px); box-shadow: 0 24px 80px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); font-family: var(--font-read); font-size: 1.08rem; line-height: 1.8; border: 1px solid #b5a984; position: relative; } .dossier::before { content: "CASE FILE"; position: absolute; top: 18px; right: 22px; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .3em; font-weight: 100; color: rgba(160,40,30,.55); border: 1px solid rgba(160,40,30,.35); padding: 4px 9px; border-radius: 3px; text-transform: uppercase; } .dossier p { margin: 0 0 1.1em; } .dossier h2.puzzle-sec { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin: 1.8em 0 .6em; padding-bottom: .25em; border-bottom: 1px solid rgba(33,28,18,.18); } .dossier h2:first-child, .dossier p:first-child { margin-top: 0; } .dossier blockquote { margin: 1.2em 0; padding: .4em 1.2em; border-left: 3px solid var(--accent-dim); color: var(--ink-muted); font-style: italic; } .dossier ol, .dossier ul { margin: 1.1em 0; padding-left: 1.5em; } .dossier li { margin-bottom: .5em; } .dossier table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .96rem; } .dossier th, .dossier td { border: 1px solid rgba(33,28,18,.22); padding: 9px 12px; text-align: left; } .dossier th { background: rgba(33,28,18,.06); font-family: var(--font-ui); } .dossier strong { color: #3a2f1a; } .dossier em { color: var(--ink-muted); } .puzzle-fig { margin: 2em auto; text-align: center; } .puzzle-fig img { display: inline-block; max-width: 100%; border-radius: 8px; border: 1px solid #cdbf9d; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .puzzle-fig figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); margin-top: 10px; font-style: italic; } /* challenge box inside dossier */ .dossier aside.challenge { margin: 2.4em 0 .4em; padding: 26px 30px; background: rgba(192,70,60,.07); border: 1px dashed rgba(192,70,60,.5); border-radius: 12px; } .dossier aside.challenge h2 { font-family: var(--font-display); color: var(--blood); font-size: 1.4rem; margin: 0 0 .5em; border: 0; padding: 0; } .dossier aside.challenge ol, .dossier aside.challenge ul { margin: .6em 0; } /* ---------- Solve form ---------- */ .solve { margin: 46px auto 30px; } .solve-card { background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%); border: 1px solid var(--border-2); border-radius: var(--radius); padding: clamp(26px, 5vw, 44px); box-shadow: var(--shadow); max-width: 640px; margin: 0 auto; box-shadow: 0 24px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); } .solve-card h2 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 8px; text-align: center; } .solve-card .challenge-ask { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 14px 18px; border-radius: 8px; color: var(--muted); margin: 16px 0 26px; font-size: .97rem; } .solve-card p.note { color: var(--faint); font-size: .9rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: .85rem; font-weight: 100; color: var(--muted); margin-bottom: 7px; letter-spacing: .02em; } .field input, .field textarea, .field select { width: 100%; background: var(--bg); border: 1px solid var(--border-2); border-radius: 9px; color: var(--text); font-family: var(--font-ui); font-size: 1rem; padding: 12px 14px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216,177,74,.15); } .field textarea { min-height: 220px; font-family: var(--font-read); line-height: 1.6; } .field .hint { font-size: .8rem; color: var(--faint); margin-top: 6px; } .hp { position: absolute; left: -5000px; } .solve-card button { width: 100%; justify-content: center; margin-top: 6px; } .spoiler-guard { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); background: rgba(95,174,110,.07); border: 1px solid rgba(95,174,110,.25); border-radius: 9px; padding: 12px 14px; margin-bottom: 22px; } .spoiler-guard input { margin-top: 3px; } /* ---------- generic prose ---------- */ .prose p { color: var(--text); } .prose h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 1.6em 0 .4em; } .callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 20px 24px; margin: 24px 0; color: var(--muted); } .callout b { color: var(--text); } ul.clean { list-style: none; padding: 0; } ul.clean li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; } ul.clean li:last-child { border: 0; } ul.clean li .mk { color: var(--accent); font-weight: 100; } /* ---------- Footer ---------- */ footer { border-top: 1px solid rgba(255,255,255,.04); padding: 44px 0; margin-top: 40px; color: var(--faint); font-size: .9rem; background: rgba(0,0,0,.4); } footer .foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; } footer a { color: var(--muted); } footer a:hover { color: var(--accent); } /* ---------- Case file cover page ---------- */ .cover-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 0 44px; min-height: 300px; justify-content: center; } .cover-stamp { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 100; color: rgba(33,28,18,.4); border: 1px solid rgba(33,28,18,.22); padding: 5px 14px; border-radius: 4px; margin-bottom: 30px; } .cover-title { font-family: var(--font-display) !important; font-size: clamp(1.7rem, 4vw, 2.6rem) !important; font-weight: 100 !important; line-height: 1.12 !important; color: var(--ink) !important; margin: 0 0 8px !important; border: none !important; padding: 0 !important; } .cover-subtitle { color: var(--ink-muted); font-family: var(--font-read); font-size: 1.1rem; margin: 0; } .cover-rule { width: 60px; height: 2px; background: rgba(33,28,18,.22); margin: 24px auto; flex-shrink: 0; } .cover-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; } .cover-diff { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 100; padding: 4px 12px; border-radius: 999px; border: 1px solid; font-family: var(--font-ui); } .cover-diff.Approachable { color: #3a7a3a; border-color: rgba(58,122,58,.45); background: rgba(58,122,58,.07); } .cover-diff.Tricky { color: #2a6a8a; border-color: rgba(42,106,138,.45); background: rgba(42,106,138,.07); } .cover-diff.Fiendish { color: #7a5e08; border-color: rgba(122,94,8,.45); background: rgba(122,94,8,.07); } .cover-diff.Brutal { color: #8a2020; border-color: rgba(138,32,32,.45); background: rgba(138,32,32,.07); } .cover-tag { font-size: .72rem; color: var(--ink-muted); border: 1px solid rgba(33,28,18,.18); padding: 3px 9px; border-radius: 999px; font-family: var(--font-ui); } .cover-teaser { font-style: italic; color: var(--ink-muted); font-size: .94rem; max-width: 500px; line-height: 1.65; margin: 0 !important; } /* ---------- Chapter navigation (puzzle pages) ---------- */ .chapter-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; margin: 8px 0; } .ch-btn { appearance: none; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: .88rem; font-weight: 100; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; } .ch-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .ch-btn:disabled { opacity: .32; cursor: not-allowed; } .ch-label { color: var(--muted); font-size: .86rem; font-weight: 100; text-align: center; flex: 1; min-width: 0; } /* ---------- Envelope intro overlay ---------- */ .env-overlay { position: fixed; inset: 0; z-index: 9999; background: #020304; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.9s ease, visibility 0.9s ease; } .env-overlay.gone { opacity: 0; visibility: hidden; pointer-events: none; } .env-inner { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; padding: 24px; } /* Scene: 504×423px (560×470 × 0.9). Top 126px = card zone. Bottom 297px = envelope box. */ .env-scene { position: relative; width: 504px; height: 423px; } /* Letter card */ .env-card { position: absolute; top: 0; left: 54px; right: 54px; height: 158px; z-index: 2; background: rgba(6,7,12,0.97); border: 1px solid rgba(200,162,52,0.20); padding: 20px 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: 0; transform: translateY(158px); transition: transform 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.65s, opacity 0.50s ease 0.60s; pointer-events: none; } .env-scene.opening .env-card { transform: translateY(0); opacity: 1; } /* Scene position on open is set dynamically via JS to center the card */ .env-scene.opening .env-box { transform: translateY(25px); opacity: 0.88; transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.65s, opacity 0.95s ease 0.65s; } .env-card-stamp { font-size: 0.76rem; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(200,162,52,0.48); font-weight: 100; } .env-card-rule { height: 1px; background: rgba(200,162,52,0.16); } .env-card-text { font-size: 1.5rem; font-weight: 100; letter-spacing: 0.04em; color: rgba(219,214,204,0.92); margin: 0; } .env-card-sub { font-size: 1.0rem; font-weight: 100; letter-spacing: 0.08em; color: rgba(138,144,153,0.58); margin: 0; } /* Envelope box — fills the bottom 297px of the scene */ .env-box { position: absolute; bottom: 0; left: 0; right: 0; height: 297px; z-index: 1; } /* Body SVG */ .env-svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgba(200,162,52,0.38); stroke-width: 1; fill: none; } /* Flap — proportional to 297px box (134/220 × 297 ≈ 181px) */ .env-flap { position: absolute; top: 0; left: 0; right: 0; height: 181px; transform-origin: center top; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.30s, opacity 0.28s ease 0.55s; z-index: 3; } .env-flap svg { display: block; width: 100%; height: 100%; } .env-scene.opening .env-flap { transform: perspective(700px) rotateX(-90deg); opacity: 0; } /* Seal — quatrefoil wax stamp */ .env-seal { position: absolute; top: 130px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; z-index: 4; } @keyframes seal-pop { 0% { transform: translateX(-50%) rotate(-4deg) scale(1); opacity: 1; } 25% { transform: translateX(-50%) rotate( 4deg) scale(1.15); opacity: 1; } 55% { transform: translateX(-50%) rotate(-1deg) scale(1.35); opacity: 0.8; } 100% { transform: translateX(-50%) scale(0.1); opacity: 0; } } .env-seal svg { display: block; width: 100%; height: 100%; } .env-scene.opening .env-seal { animation: seal-pop 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; } /* Hints */ .env-hint { font-size: 0.82rem; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(82,88,95,0.68); margin: 0; font-weight: 100; animation: env-blink 2.4s ease-in-out infinite; transition: opacity 0.3s ease; } .env-overlay.opening-started .env-hint { opacity: 0; animation: none; } .env-continue { font-size: 0.82rem; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(200,162,52,0.72); margin: 0; font-weight: 100; opacity: 0; transition: opacity 0.6s ease; } .env-overlay.letter-shown .env-continue { opacity: 0.78; } .env-overlay.continue-blink .env-continue { animation: env-blink 2.4s ease-in-out infinite; } @keyframes env-blink { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.78; } } /* ---------- thanks page ---------- */ .center-screen { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .center-screen .seal { font-size: 3.4rem; color: var(--accent); margin-bottom: 10px; } .center-screen h1 { font-family: var(--font-display); font-size: 2.4rem; margin: 0 0 12px; } .center-screen p { color: var(--muted); max-width: 520px; } /* ---------- Analysis page hover-expand TOC (wood drawer) ---------- */ .toc { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; width: 28px; /* Wood grain: fine dark lines over a warm walnut base. Three gradient layers: grain lines (dark), highlight veins (warm), base walnut gradient. */ background: repeating-linear-gradient( 93deg, transparent 0px, transparent 5px, rgba(0,0,0,.13) 5px, rgba(0,0,0,.13) 6px, transparent 6px, transparent 13px, rgba(0,0,0,.08) 13px, rgba(0,0,0,.08) 14px ), repeating-linear-gradient( 91deg, transparent 0px, transparent 22px, rgba(210,150,60,.07) 22px, rgba(210,150,60,.07) 24px ), linear-gradient(175deg, #4e3318 0%, #2e1d0b 45%, #1c1208 100%); border-top: 1px solid #5a3d1a; border-right: 1px solid #5a3d1a; border-bottom: 1px solid #120d06; border-left: 3px solid #7a5525; border-radius: 0 6px 6px 0; box-shadow: 5px 4px 24px rgba(0,0,0,.65), 1px 0 6px rgba(0,0,0,.4), inset -1px 0 0 rgba(255,200,100,.06); overflow: hidden; transition: width .2s .07s, box-shadow .2s, border-left-color .2s; cursor: default; } .toc:hover { width: 216px; border-left-color: #c49a3e; box-shadow: 12px 6px 44px rgba(0,0,0,.75), 2px 0 10px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,200,100,.08); transition: width .27s .36s, box-shadow .22s .36s, border-left-color .15s .36s; } /* grip — carved grooves in the wood face */ .toc-grip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; opacity: 1; transition: opacity .1s; pointer-events: none; } .toc:hover .toc-grip { opacity: 0; transition: opacity .07s; } .toc-grip i { display: block; height: 2px; border-radius: 1px; /* grooves: dark top edge + faint warm highlight below = carved look */ background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(200,140,60,.18) 100%); box-shadow: 0 1px 0 rgba(255,180,80,.12); } .toc-grip i:nth-child(1) { width: 14px; } .toc-grip i:nth-child(2) { width: 10px; } .toc-grip i:nth-child(3) { width: 14px; } /* section position dots */ .toc-dots { position: absolute; bottom: 13px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: 1; transition: opacity .1s; pointer-events: none; } .toc:hover .toc-dots { opacity: 0; transition: opacity .07s; } .toc-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(200,140,60,.25); transition: background .2s, transform .2s; flex-shrink: 0; } .toc-dot.active { background: var(--accent); transform: scale(1.6); } /* nav panel — warm wood interior */ .toc-nav { min-width: 216px; padding: 22px 16px 22px 0; opacity: 0; transition: opacity .1s; background: repeating-linear-gradient( 93deg, transparent 0px, transparent 5px, rgba(0,0,0,.09) 5px, rgba(0,0,0,.09) 6px, transparent 6px, transparent 13px, rgba(0,0,0,.05) 13px, rgba(0,0,0,.05) 14px ), repeating-linear-gradient( 91deg, transparent 0px, transparent 22px, rgba(210,150,60,.05) 22px, rgba(210,150,60,.05) 24px ), linear-gradient(175deg, #3e2910 0%, #251808 100%); } .toc:hover .toc-nav { opacity: 1; transition: opacity .18s .5s; } .toc-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .17em; color: #c49a3e; font-weight: 100; margin-bottom: 16px; padding-left: 20px; white-space: nowrap; } .toc a { display: block; font-size: .85rem; color: #b8a882; padding: 5px 0 5px 18px; text-decoration: none; border-left: 2px solid transparent; white-space: nowrap; line-height: 1.38; transition: color .12s, border-color .12s, background .12s; } .toc a:hover { color: #e8dfc8; background: rgba(255,200,100,.05); } .toc a.active { color: var(--accent); border-left-color: var(--accent); } .toc a.toc-sub { padding-left: 30px; font-size: .79rem; color: #7a6640; } .toc a.toc-sub:hover { color: #b8a882; } .toc a.toc-sub.active { color: var(--accent); border-left-color: var(--accent); } @media (max-width: 860px) { .toc { display: none; } } /* ---------- Puzzle page left TOC (desktop ≥ 1280px) ---------- */ .puzzle-toc { position: fixed; top: 50%; transform: translateY(-50%); left: 16px; width: 188px; z-index: 40; display: none; max-height: 70vh; } @media (min-width: 1280px) { .puzzle-toc { display: block; } } .puzzle-toc-inner { background: rgba(8,9,14,.94); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius); padding: 14px 0 10px; box-shadow: var(--shadow-sm); overflow-y: auto; max-height: 70vh; } .puzzle-toc-label { font-size: .63rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent-dim); font-weight: 100; padding: 0 14px 10px; display: block; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .puzzle-toc-item { display: block; font-size: .80rem; color: var(--muted); padding: 6px 14px 6px 16px; text-decoration: none; border-left: 2px solid transparent; line-height: 1.3; cursor: pointer; transition: color .12s, background .12s, border-color .12s; word-break: break-word; } .puzzle-toc-item:hover { color: var(--text); background: rgba(255,255,255,.03); } .puzzle-toc-item.active { color: var(--accent); border-left-color: var(--accent); } /* ---------- Puzzle page fixed bottom nav (desktop) ---------- */ .puzzle-fixednav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: 52px; background: rgba(8,9,14,.95); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(14px); box-shadow: 0 -4px 24px rgba(0,0,0,.5); display: none; align-items: center; } @media (min-width: 761px) { .puzzle-fixednav { display: flex; } body.has-chapbar { padding-bottom: 52px; } } .pfn-btn { appearance: none; border: none; background: none; color: var(--muted); font-family: var(--font-ui); font-size: .88rem; font-weight: 100; padding: 0 28px; height: 100%; cursor: pointer; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.06); transition: color .12s, background .12s; } .pfn-btn:last-child { border-right: none; border-left: 1px solid rgba(255,255,255,.06); } .pfn-btn:disabled { opacity: .28; cursor: not-allowed; } .pfn-btn:not(:disabled):hover { color: var(--accent); background: rgba(200,160,53,.05); } .pfn-label { flex: 1; text-align: center; color: var(--muted); font-size: .86rem; font-weight: 100; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Mobile chapter bar (activated when body.has-chapbar) ---------- */ .mobile-chapbar, .mobile-chapdrawer { display: none; } /* ============================================================ RESPONSIVE 1024 tablet · 760 phone · 480 small phone ============================================================ */ @media (max-width: 1024px) { section { padding: 52px 0; } .snap-card { border-radius: 14px; } .puzzle-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; } .stats { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); } } @media (max-width: 760px) { /* ---- Base ---- */ .wrap { padding: 0 18px; } section { padding: 38px 0; } /* ---- Nav ---- */ .nav-links { gap: 10px; } .nav-links a:not(.cta) { display: none; } /* ---- Disable snap scrolling on mobile for smooth linear scroll ---- */ html.snap-layout { scroll-snap-type: none; } html.snap-layout main { padding-top: 64px; } .hero, .snap-page { scroll-snap-align: unset; scroll-snap-stop: unset; } /* ---- Hero ---- */ .hero { padding: 40px 0 32px; min-height: unset; } .hero .sub { font-size: .88rem; margin-bottom: 22px; } .btn { padding: 11px 20px; font-size: .94rem; } /* ---- Stats ---- */ .stat .num { font-size: 2.1rem; } /* ---- Leaderboard: card layout ---- */ .board-wrap { overflow-x: unset; border: none; box-shadow: none; border-radius: 0; background: transparent; } table.board { min-width: unset; display: block; } table.board thead { display: none; } table.board tbody { display: block; } table.board tbody tr { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; } table.board tbody tr:last-child { margin-bottom: 0; } table.board tbody tr:hover { background: rgba(200,160,53,.04); border-color: rgba(200,160,53,.18); } table.board td { border: none; padding: 0; } table.board td.model { width: 100%; display: flex; align-items: center; gap: 8px; font-size: .95rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); } table.board td:not(.model) { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .9rem; } table.board td:not(.model)::before { display: block; margin-bottom: 4px; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } table.board td:nth-child(2)::before { content: "Perfect"; color: var(--text); } table.board td:nth-child(3)::before { content: "Solved ≥90%"; color: var(--text); } table.board td:nth-child(4)::before { content: "Mean (ref)"; } /* ---- Case studies ---- */ .quote-pair { grid-template-columns: 1fr; } .case { padding: 20px 18px; } .scoreline { gap: 10px; flex-wrap: wrap; } .scoreline .chip { padding: 8px 12px; font-size: .88rem; } /* ---- Puzzle grid ---- */ .puzzle-grid { grid-template-columns: 1fr; gap: 14px; } /* ---- Case page header ---- */ .case-head { padding: 36px 0 14px; } .lang-switch button { padding: 7px 14px; font-size: .84rem; } /* ---- Dossier ---- */ .dossier { padding: 28px 18px; font-size: 1.02rem; } .dossier::before { display: none; } /* ---- Chapter nav: replaced by mobile bar on puzzle pages ---- */ .chapter-nav { display: none; } /* ---- Cover ---- */ .cover-page { padding: 32px 0 22px; min-height: unset; } .cover-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; } /* ---- Solve form ---- */ .form-row { grid-template-columns: 1fr; } .solve { margin: 28px 0 18px; } .solve-card { padding: 22px 18px; } /* ---- Footer ---- */ footer { padding: 28px 0; } footer .foot-grid { flex-direction: column; align-items: flex-start; gap: 10px; } /* ---- Mobile chapter bar ---- */ body.has-chapbar { padding-bottom: 56px; } .mobile-chapbar { display: flex; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: 56px; background: rgba(8,9,14,.97); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); box-shadow: 0 -4px 24px rgba(0,0,0,.55); } .mcb-btn { appearance: none; border: none; background: none; color: var(--text); font-size: 1.15rem; cursor: pointer; padding: 0 18px; height: 100%; flex-shrink: 0; opacity: .75; transition: opacity .12s; } .mcb-btn:disabled { opacity: .22; cursor: not-allowed; } .mcb-btn:not(:disabled):active { opacity: 1; } .mcb-center { flex: 1; height: 100%; min-width: 0; appearance: none; border: none; background: none; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0 4px; } .mcb-text { color: var(--muted); font-size: .79rem; font-weight: 100; font-family: var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); } .mcb-chevron { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--muted); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; } .mobile-chapbar.drawer-open .mcb-chevron { transform: rotate(180deg); } .mobile-chapdrawer { display: block; position: fixed; bottom: 56px; left: 0; right: 0; z-index: 99; background: rgba(8,9,14,.97); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(14px); max-height: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.4,0,.2,1); } .mobile-chapdrawer.open { max-height: 55vh; } .mcd-inner { overflow-y: auto; max-height: 55vh; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; } .mcd-item { display: block; width: 100%; text-align: left; appearance: none; border: none; border-left: 2px solid transparent; background: none; color: var(--muted); font-family: var(--font-ui); font-size: .86rem; font-weight: 100; padding: 11px 20px; cursor: pointer; transition: color .12s, background .1s, border-color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mcd-item:active { background: rgba(255,255,255,.05); } .mcd-item.active { color: var(--accent); border-left-color: var(--accent); } } @media (max-width: 480px) { /* ---- Base ---- */ .wrap { padding: 0 14px; } section { padding: 28px 0; } /* ---- Nav ---- */ .brand span { display: none; } .nav-links a.cta { padding: 7px 13px; font-size: .85rem; } /* ---- Hero ---- */ .hero { padding: 28px 0 24px; } .btn-row { gap: 10px; } .btn { padding: 10px 18px; font-size: .9rem; } /* ---- Stats ---- */ .stats { grid-template-columns: 1fr 1fr; gap: 12px; } .stat { padding: 18px 14px; } .stat .num { font-size: 1.9rem; } /* ---- Leaderboard ---- */ table.board thead th, table.board td { padding: 8px 8px; font-size: .82rem; } .scorebar { min-width: 60px; } .scorebar .val { display: none; } /* ---- Case page ---- */ .case-head { padding: 24px 0 10px; } .lang-switch { flex-wrap: wrap; border-radius: var(--radius); } .lang-switch button { padding: 7px 12px; font-size: .82rem; } /* ---- Dossier ---- */ .dossier { padding: 20px 14px; font-size: .98rem; line-height: 1.72; } .dossier h2.puzzle-sec { font-size: 1.25rem; } /* ---- Cover ---- */ .cover-page { padding: 24px 0 16px; } /* ---- Solve form ---- */ .solve-card { padding: 18px 14px; } /* ---- Footer ---- */ footer { padding: 22px 0; font-size: .84rem; } /* ---- Puzzle cards ---- */ .pcard .case-no { font-size: 1.6rem; } .pcard h3 { font-size: 1.15rem; } }