/* RECU — TAPELOG blog theme (receipt design, mirrors the portal) */
:root {
    --ink: #1b264f;
    --ink-2: #2a3560;
    --paper: #fbfaf4;
    --paper-2: #f3efe3;
    --desk: #e4dfd2;
    --line: rgba(27, 38, 79, 0.18);
    --muted: #7a7a72;
    --accent: #007aff;
    --ok: #1a7f37;
    --marker: #ffe14d;
    --font-receipt: 'Courier Prime', monospace;
    --font-mono: 'Space Mono', monospace;
    --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--desk);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 22px 4rem;
}

/* top tape strip */
.top-tape {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.6rem 0 1rem;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 3rem;
}

.top-tape .mascot { width: 28px; height: 28px; border-radius: 4px; }

.top-tape .brand {
    font-family: var(--font-receipt);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
}

.top-tape .barcode {
    width: 60px; height: 18px; opacity: 0.8;
    background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 6px, transparent 6px 9px, var(--ink) 9px 11px, transparent 11px 14px);
}

.top-tape .crumb {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

.top-tape .crumb a { color: var(--accent); text-decoration: none; }

/* article tape */
.article {
    background: var(--paper);
    padding: 2.6rem 2.8rem 2.2rem;
    position: relative;
    box-shadow: 0 12px 40px rgba(60,50,20,0.14);
}

.article::before,
.article::after {
    content: "";
    position: absolute;
    left: 0; right: 0; height: 12px;
    background-repeat: repeat-x;
    background-size: 12px 12px;
}

.article::before {
    top: -12px;
    background-image: linear-gradient(-45deg, transparent 6px, var(--paper) 0), linear-gradient(45deg, transparent 6px, var(--paper) 0);
}

.article::after {
    bottom: -12px;
    background-image: linear-gradient(-45deg, var(--paper) 6px, transparent 0), linear-gradient(45deg, var(--paper) 6px, transparent 0);
}

.article-meta {
    display: flex;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.2rem;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 0.8rem;
}

.article-meta .tag { color: var(--accent); font-weight: 700; }

h1 {
    font-family: var(--font-receipt);
    font-size: 2.1rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    letter-spacing: 0.3px;
}

.standfirst {
    font-family: var(--font-receipt);
    font-size: 1.05rem;
    color: #4a4a42;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 1.2rem;
    margin-bottom: 1.6rem;
}

h2 {
    font-family: var(--font-receipt);
    font-size: 1.35rem;
    letter-spacing: 0.5px;
    margin: 2rem 0 0.8rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
}

h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1.5rem 0 0.5rem;
}

p { font-size: 1rem; color: #444; }

ul, ol { font-size: 0.98rem; color: #444; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

strong { color: var(--ink); }

.hl { background: linear-gradient(transparent 62%, var(--marker) 62%); padding: 0 0.15rem; }

blockquote {
    margin: 1.5rem 0;
    padding: 0.2rem 1.2rem;
    border-left: 3px solid var(--accent);
    font-family: var(--font-receipt);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-2);
}

/* CTA tape */
.cta {
    margin-top: 2.5rem;
    background: #1a1a1a;
    color: #e8e4d8;
    padding: 1.4rem 1.6rem;
    position: relative;
}

.cta::before {
    content: "";
    position: absolute;
    top: -6px; left: 0; right: 0; height: 6px;
    background: linear-gradient(-45deg, transparent 4px, #1a1a1a 0), linear-gradient(45deg, transparent 4px, #1a1a1a 0);
    background-size: 8px 8px;
}

.cta h3 { font-family: var(--font-receipt); letter-spacing: 1px; text-transform: uppercase; color: #ffe14d; margin: 0 0 0.5rem; }

.cta p { color: rgba(232,228,216,0.85); font-size: 0.95rem; margin: 0 0 1rem; }

.cta a {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    background: #ffe14d;
    text-decoration: none;
    padding: 0.6rem 1rem;
}

.cta a:hover { background: #fff; }

/* footer */
.blog-footer {
    margin-top: 4rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 2;
}

.blog-footer a { color: var(--accent); text-decoration: none; }
.blog-footer a:hover { text-decoration: underline; }

.trademark {
    font-family: var(--font-sans);
    font-size: 0.64rem;
    color: #9a9589;
    line-height: 1.6;
    max-width: 560px;
    margin: 1rem auto 0;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 560px) {
    .article { padding: 2rem 1.4rem 1.8rem; }
    h1 { font-size: 1.6rem; }
    .top-tape .crumb { display: none; }
}