:root{
    --ink-black:#161513;
    --ink-black-soft:#1d1c19;
    --plate:#242220;
    --plate-line:#38352f;
    --stock:#f3f1ea;
    --stock-dim:#8f8b80;
    --cyan:#00b2e3;
    --magenta:#ec1f6e;
    --yellow:#ffd400;

    --mono:'IBM Plex Mono',monospace;
    --sans:'Inter',sans-serif;
}

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

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
    font-family:var(--sans);
    background:
        radial-gradient(circle at 1px 1px, rgba(243,241,234,0.05) 1px, transparent 0) 0 0/14px 14px,
        var(--ink-black);
    color:var(--stock);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:48px 20px;
}

.sheet{
    width:min(900px,100%);
    position:relative;
    padding:56px clamp(24px,5vw,72px) 44px;
}

/* corner registration marks — the crosshair-in-circle used to align
   printing plates across the four process-ink passes */
.reg{
    position:absolute;
    width:26px;
    height:26px;
    opacity:0.9;
}
.reg::before,
.reg::after{
    content:"";
    position:absolute;
    background:var(--stock-dim);
}
.reg::before{ /* vertical */
    left:50%;
    top:0;
    width:1px;
    height:100%;
    transform:translateX(-50%);
}
.reg::after{ /* horizontal */
    top:50%;
    left:0;
    height:1px;
    width:100%;
    transform:translateY(-50%);
}
.reg-circle{
    position:absolute;
    inset:5px;
    border:1px solid var(--stock-dim);
    border-radius:50%;
}
.reg.tl{ top:14px; left:14px; }
.reg.tr{ top:14px; right:14px; }
.reg.bl{ bottom:14px; left:14px; }
.reg.br{ bottom:14px; right:14px; }

/* breadcrumb back-link used on topic pages nested under the home page */
.back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    color:var(--stock-dim);
    text-decoration:none;
    text-transform:uppercase;
    margin-bottom:34px;
    transition:color .2s ease;
}
.back-link:hover,
.back-link:focus-visible{
    color:var(--cyan);
}

header{
    text-align:center;
    margin-bottom:14px;
    position:relative;
}

.eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--stock-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:26px;
}
.eyebrow .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    display:inline-block;
}
.eyebrow .dot.c{ background:var(--cyan); }
.eyebrow .dot.m{ background:var(--magenta); }
.eyebrow .dot.y{ background:var(--yellow); }

h1{
    font-family:var(--mono);
    font-size:clamp(46px,9vw,78px);
    font-weight:600;
    letter-spacing:.14em;
    line-height:1;
    position:relative;
    display:inline-block;
}

h1 .base{ color:var(--stock); }

h1.h1-sub{
    font-size:clamp(32px,7vw,52px);
    letter-spacing:.1em;
}

.subtitle{
    margin-top:20px;
    font-size:16px;
    color:var(--stock-dim);
    font-weight:400;
    letter-spacing:.01em;
}

.rule{
    margin:40px 0 36px;
    height:1px;
    background:repeating-linear-gradient(
        to right,
        var(--plate-line) 0,
        var(--plate-line) 5px,
        transparent 5px,
        transparent 10px
    );
}

.tools{
    display:grid;
    gap:16px;
}

.tools-grid{
    grid-template-columns:repeat(2,1fr);
}

/* when there's an odd card out, let it stretch across the full row
   instead of leaving a lone tile stranded on the left */
.tools-grid .card:last-child:nth-child(odd){
    grid-column:1 / -1;
}

.card{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px clamp(20px,4vw,34px);
    background:var(--plate);
    border:1px solid var(--plate-line);
    text-decoration:none;
    color:inherit;
    transition:border-color .2s ease, transform .2s ease;
    outline-offset:3px;
}

.card > div{
    min-width:0;
}

.card:focus-visible{
    outline:2px solid var(--cyan);
}

/* crop marks at the card's own corners, like trim marks on a job ticket */
.card::before,
.card::after{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    pointer-events:none;
}
.card::before{ /* top-left */
    top:-1px; left:-1px;
    border-top:1px solid var(--stock-dim);
    border-left:1px solid var(--stock-dim);
}
.card::after{ /* bottom-right */
    bottom:-1px; right:-1px;
    border-bottom:1px solid var(--stock-dim);
    border-right:1px solid var(--stock-dim);
}

.card:hover,
.card:focus-visible{
    border-color:var(--cyan);
    transform:translateX(4px);
}

.card:hover::before,
.card:hover::after,
.card:focus-visible::before,
.card:focus-visible::after{
    border-color:var(--cyan);
}

.card-index{
    font-family:var(--mono);
    font-size:12px;
    color:var(--stock-dim);
    letter-spacing:.12em;
    display:block;
    margin-bottom:10px;
}

.card h2{
    font-family:var(--mono);
    font-size:19px;
    font-weight:500;
    margin-bottom:8px;
    letter-spacing:.01em;
}

.card p{
    color:var(--stock-dim);
    font-size:14.5px;
    line-height:1.5;
    max-width:46ch;
}

.arrow{
    flex-shrink:0;
    font-family:var(--mono);
    font-size:20px;
    color:var(--stock-dim);
    transition:transform .2s ease, color .2s ease;
}

.card:hover .arrow,
.card:focus-visible .arrow{
    transform:translateX(6px);
    color:var(--cyan);
}

footer{
    margin-top:52px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--stock-dim);
    letter-spacing:.05em;
}

footer .swatches{
    display:flex;
    gap:6px;
}
footer .swatches span{
    width:9px;
    height:9px;
    display:inline-block;
}
footer .swatches .k{ background:var(--stock); }
footer .swatches .c{ background:var(--cyan); }
footer .swatches .m{ background:var(--magenta); }
footer .swatches .y{ background:var(--yellow); }

@media (max-width:560px){
    .sheet{ padding:44px 16px 32px; }
    .reg{ display:none; }
    footer{ flex-direction:column; gap:14px; text-align:center; }
    .tools-grid{ grid-template-columns:1fr; }
}

@media (max-width:380px){
    h1{ letter-spacing:.08em; }
    .card{ gap:12px; }
    .card p{ font-size:14px; }
}