@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500..700;1,9..144,500..700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
--paper:#FFFFFF;
--wash:#FBF8F4;
--ink:#1C1A19;
--ink-soft:#6B625C;
--cardinal:#A6192E;
--oxblood:#7C1425;
--hairline:#E7E0D8;
--shadow: 0 1px 2px rgba(28,26,25,.04), 0 10px 24px rgba(28,26,25,.05);
}

*{box-sizing:border-box;}

body{
margin:0;
min-height:100vh;
background:var(--wash);
display:flex;
justify-content:center;
font-family:'Inter', sans-serif;
color:var(--ink);
-webkit-font-smoothing:antialiased;
}

.page{
width:100%;
max-width:440px;
padding:56px 22px 48px;
}

/* ---------- Medallion ---------- */
.medallion, .medallion img{
width:148px;
height:148px;
margin:0 auto;
}
.medallion svg{ width:100%; height:100%; display:block; overflow:visible; }
.grooves-group{
transform-origin:100px 100px;
animation:spin 9s linear infinite;
animation-play-state:paused;
}
.medallion:hover .grooves-group{ animation-play-state:running; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
.grooves-group{ animation:none !important; }
}

/* ---------- Header text ---------- */
.name{
margin:22px 0 0;
text-align:center;
font-family:'Fraunces', serif;
font-style:italic;
font-weight:600;
font-size:34px;
letter-spacing:-0.01em;
color:var(--ink);
}

.tagline{
margin:8px 0 0;
text-align:center;
font-family:'IBM Plex Mono', monospace;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ink-soft);
}
.tagline .dot{ color:var(--cardinal); margin:0 2px; }

.catalog{
display:flex;
align-items:center;
gap:10px;
margin:20px 0 0;
color:var(--ink-soft);
font-family:'IBM Plex Mono', monospace;
font-size:10px;
letter-spacing:.14em;
text-transform:uppercase;
}
.catalog::before, .catalog::after{
content:'';
flex:1;
height:1px;
background:var(--hairline);
}

/* ---------- Links ---------- */
.links{
margin-top:34px;
display:flex;
flex-direction:column;
gap:13px;
}

.stub{
position:relative;
display:flex;
align-items:stretch;
background:var(--paper);
border:1px solid var(--hairline);
border-radius:14px;
text-decoration:none;
color:var(--ink);
box-shadow:var(--shadow);
overflow:hidden;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stub::before{
content:'';
width:4px;
align-self:stretch;
background:linear-gradient(var(--cardinal), var(--oxblood));
flex-shrink:0;
}
.stub:hover{
transform:translateX(4px);
border-color:var(--cardinal);
box-shadow:0 6px 18px rgba(166,25,46,.14);
}
.stub:focus-visible{
outline:2px solid var(--cardinal);
outline-offset:2px;
}

.stub-main{
display:flex;
align-items:center;
gap:13px;
padding:14px 14px;
flex:1;
min-width:0;
}
.stub-icon{
width:19px;
height:19px;
flex-shrink:0;
color:var(--cardinal);
}
.stub-icon svg{ width:100%; height:100%; display:block; }

.stub-text{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.stub-title{
font-family:'Fraunces', serif;
font-weight:600;
font-size:15px;
letter-spacing:-.005em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.stub-sub{
font-family:'IBM Plex Mono', monospace;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-soft);
}

.stub-divider{
width:0;
margin:12px 0;
border-left:1.5px dashed var(--hairline);
position:relative;
flex-shrink:0;
}
.stub-divider::before, .stub-divider::after{
content:'';
position:absolute;
left:-3px;
width:6px;
height:6px;
border-radius:50%;
background:var(--hairline);
}
.stub-divider::before{ top:-3px; }
.stub-divider::after{ bottom:-3px; }

.stub-arrow{
width:48px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--cardinal);
transition:transform .18s ease;
}
.stub-arrow svg{ width:15px; height:15px; }
.stub:hover .stub-arrow{ transform:translateX(3px); }

/* ---------- Footer ---------- */
.foot{
margin-top:38px;
text-align:center;
}
.foot p{
margin:0;
font-family:'IBM Plex Mono', monospace;
font-size:9.5px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--ink-soft);
}
.foot a{
color:var(--cardinal);
text-decoration:none;
}
.foot a:hover{
text-decoration:underline;
}