:root { --hot: #C87A53; --bg: #FDFBF7; --ink: #2B1E17; --on-hot: #111111; --card: #FEFEFD; --mid: #62574F; --soft: #877F77; --line: #E0DCD8; --pale: #CFCAC6; --tint: #F8EEE7; --sans: var(--font-body); --mono: ui-monospace, Menlo, monospace; --font-head: "Plus Jakarta Sans", sans-serif; --font-body: "Inter", sans-serif; --head-color: var(--ink); --head-weight: 800; --head-style: normal; --head-case: none; --head-track: -.02em; --scale: 1; --read: 1; --ease: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: calc(16px * var(--scale) * var(--read)); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font-body); overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
main :is(h1, h2, h3), .m-body h2 { color: var(--head-color); font-family: var(--font-head); font-weight: var(--head-weight); font-style: var(--head-style); text-transform: var(--head-case); letter-spacing: var(--head-track); }
h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; }
h2 { font-size: 1.4rem; line-height: 1.2; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.draft-bar { position: relative; z-index: 60; padding: 6px 16px; background: #000; color: #fff; font-size: 12px; text-align: center; }
.draft-bar b { color: #ffb347; }
.lines { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.curtain { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity .55s ease, visibility .55s; }
.curtain span { color: var(--hot); font: var(--head-weight) clamp(30px, 6vw, 64px) var(--font-head); animation: rise .7s var(--ease) both; }
.curtain.gone { opacity: 0; visibility: hidden; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.brand-bar { position: fixed; top: 22px; left: 30px; z-index: 40; }
.draft-bar:not([hidden]) ~ .brand-bar { top: 52px; }
.brand { color: var(--hot); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; }

.app { position: relative; z-index: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.rail { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 62px 26px 86px; border-right: 1px solid var(--line); }
.avatar { width: 92px; height: 92px; margin: 0 0 14px; overflow: hidden; border: 3px solid var(--card); border-radius: 50%; box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.rail-name { font: var(--head-weight) 1.1rem/1.25 var(--font-head); color: var(--head-color); }
.rail-role { margin-top: 3px; color: var(--soft); font-size: .82rem; }
@media (min-width: 761px) { .draft-bar:not([hidden]) ~ .app .rail { height: calc(100vh - 30px); } }
.rail-nav { display: flex; flex-direction: column; gap: 2px; margin: 24px 0; }
.rail-nav button { position: relative; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--mid); font-weight: 500; text-align: left; cursor: pointer; transition: background .25s, color .25s, padding .3s var(--ease); }
.rail-nav button:hover { padding-left: 17px; background: var(--tint); color: var(--ink); }
.rail-nav button[aria-current="page"] { background: var(--hot); color: var(--on-hot); }
.rail-cta { margin-top: auto; padding: 11px; border: 1px solid var(--hot); border-radius: 99px; color: var(--hot); font-size: .88rem; font-weight: 700; text-align: center; text-decoration: none; transition: background .25s, color .25s; }
.rail-cta:hover { background: var(--hot); color: var(--on-hot); }

.views { min-width: 0; padding: 38px clamp(20px, 3.5vw, 46px) 30px; }
.view { display: none; max-width: 1040px; margin: 0 auto; }
.view.on { display: block; animation: enter .55s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
.eyebrow { margin-bottom: 8px; color: var(--hot); font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.lede { max-width: 62ch; margin-top: 10px; color: var(--mid); font-size: 1.04rem; }
.note { color: var(--mid); font-size: .93rem; }
.sub { margin-top: 30px; }
.body-copy { max-width: 66ch; margin-top: 14px; color: var(--mid); }
.glass { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(8px); }
.tools { display: flex; align-items: center; gap: 16px; padding: 11px 16px; }
.tools-label { flex: none; color: var(--soft); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tools-window { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tools-track { display: flex; width: max-content; gap: 10px; margin: 0; padding: 0; list-style: none; animation: slide 38s linear infinite; }
.tools-track:hover { animation-play-state: paused; }
.tool { padding: 4px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); font-size: .82rem; font-weight: 500; white-space: nowrap; }
@keyframes slide { to { transform: translateX(calc(-50% - 5px)); } }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card); transition: transform .45s var(--ease), box-shadow .35s, border-color .3s; }
.card p { color: var(--mid); font-size: .92rem; }
.card h2 { margin-bottom: 4px; }
.home-bento .card { grid-column: span 2; min-height: 200px; cursor: pointer; }
.home-bento .card.big { grid-column: span 4; grid-row: span 2; }
.home-bento .card:nth-child(n+3) { grid-column: span 2; }
.home-bento .card::after { content: "↗"; position: absolute; top: 14px; right: 16px; color: var(--hot); font-size: 1.1rem; transition: transform .35s var(--ease); }
.home-bento .card:hover, .home-bento .card:focus-visible { transform: translateY(-5px); border-color: var(--hot); box-shadow: 0 16px 34px rgba(0, 0, 0, .12); }
.home-bento .card:hover::after { transform: translate(3px, -3px); }
.card-pic { flex: 1; min-height: 0; margin: -18px -18px 14px; overflow: hidden; }
.card-pic img { display: block; width: 100%; height: 100%; max-height: 340px; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.card-pic.short img { height: 120px; }
.card:hover .card-pic img { transform: scale(1.05); }
.card.accent { justify-content: flex-end; background: var(--hot); border-color: var(--hot); }
.card.accent h2, .card.accent p, .card.accent::after { color: var(--on-hot); }
.stat-card { justify-content: flex-end; }
.stat b { display: block; color: var(--hot); font: var(--head-weight) 1.8rem/1.1 var(--font-head); }
.stat span { display: block; margin-bottom: 8px; color: var(--mid); font-size: .78rem; }
.mini-list { margin: 8px 0 0; padding-left: 18px; color: var(--mid); font-size: .86rem; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chips button { padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--mid); font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.chips button:hover { border-color: var(--hot); color: var(--ink); }
.chips button[aria-pressed="true"] { border-color: var(--hot); background: var(--hot); color: var(--on-hot); }
.work-card { grid-column: span 2; padding: 0; border-color: var(--line); color: inherit; text-align: left; cursor: pointer; }
.work-card.wide { grid-column: span 3; }
.work-card:hover, .work-card:focus-visible { transform: translateY(-5px); border-color: var(--hot); box-shadow: 0 16px 34px rgba(0, 0, 0, .12); }
.work-pic { display: block; height: 180px; overflow: hidden; background: var(--tint); }
.work-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.work-card:hover .work-pic img { transform: scale(1.06); }
.work-word { display: grid; height: 100%; place-items: center; padding: 16px; color: var(--hot); font: var(--head-weight) 1.1rem var(--font-head); text-align: center; }
.work-text { display: block; padding: 14px 16px 16px; }
.work-text small { display: block; color: var(--hot); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.work-text b { display: block; margin-top: 3px; color: var(--head-color); font: var(--head-weight) 1.05rem/1.25 var(--font-head); }

.method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.method > div { padding: 14px; border-radius: 14px; background: var(--card); transition: transform .4s var(--ease); }
.method > div:hover { transform: translateY(-4px); }
.method small { color: var(--hot); font-weight: 700; }
.method b { display: block; color: var(--head-color); font: var(--head-weight) 1.25rem var(--font-head); }
.method p { margin-top: 4px; color: var(--mid); font-size: .9rem; }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc-tabs button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--mid); font-size: .84rem; font-weight: 500; cursor: pointer; transition: background .25s, color .25s; }
.svc-tabs button[aria-selected="true"] { border-color: var(--hot); background: var(--hot); color: var(--on-hot); }
.svc-stage { margin-top: 12px; }
.svc { display: none; }
.svc.show { display: block; animation: enter .45s var(--ease) both; }
.svc small { color: var(--hot); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.svc h3 { margin: 4px 0 6px; font-size: 1.6rem; line-height: 1.15; }
.svc ul { margin: 12px 0 0; padding-left: 18px; color: var(--mid); font-size: .92rem; }
.nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; margin-top: 16px; }
.node { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; transition: border-color .3s, background .3s, transform .35s var(--ease); }
.node b { display: block; font-size: .9rem; }
.node small { display: block; max-height: 0; overflow: hidden; color: var(--mid); font-size: .78rem; line-height: 1.4; opacity: 0; transition: max-height .4s var(--ease), opacity .3s, margin .3s; }
.node.pulse { border-color: var(--hot); background: var(--tint); }
.node.open { border-color: var(--hot); transform: translateY(-3px); }
.node.open small { max-height: 90px; margin-top: 5px; opacity: 1; }
.node:not(:nth-child(4n))::after { content: "→"; position: absolute; top: 12px; right: -18px; color: var(--soft); font-size: .86rem; }

.client-video { margin: 20px 0 0; }
.client-video video { display: block; width: 100%; max-height: 460px; border-radius: 14px; background: #000; }
.client-video figcaption { margin-top: 10px; color: var(--mid); font-size: .92rem; }
.quote { grid-column: span 2; margin: 0; }
.quote p { color: var(--ink); font-size: .98rem; }
.quote cite { margin-top: 10px; color: var(--soft); font-size: .8rem; font-style: normal; }
.roles { margin-top: 10px; }
.role { border-top: 1px solid var(--line); }
.role summary, .faq summary { cursor: pointer; list-style: none; }
.role summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.role summary { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: baseline; padding: 11px 0; }
.role summary::after, .faq summary::after { content: "+"; color: var(--hot); font-size: 1.15rem; line-height: 1; transition: transform .3s var(--ease); }
.role[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.role small { color: var(--soft); font-size: .8rem; }
.role p, .faq details p { padding-bottom: 12px; color: var(--mid); font-size: .94rem; animation: enter .4s var(--ease) both; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.stats-row .stat { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.stats-row .stat span { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 12px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: 16px; background: var(--card); }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption { padding: 8px 12px; color: var(--mid); font-size: .84rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.faq .sub { margin-top: 20px; margin-bottom: 8px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; font-weight: 600; }
#contact .sub { margin: 0 0 6px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: .88rem; overflow-wrap: anywhere; }
.links a { color: var(--hot); font-weight: 600; }
#contact label { display: block; margin-bottom: 10px; font-size: .84rem; font-weight: 600; }
#contact input, #contact textarea { display: block; width: 100%; margin-top: 3px; padding: 9px 11px; border: 1px solid var(--pale); border-radius: 10px; background: var(--bg); font-weight: 400; }
.send { width: 100%; padding: 11px; border: 0; border-radius: 99px; background: var(--hot); color: var(--on-hot); font-weight: 700; cursor: pointer; transition: transform .3s var(--ease); }
.send:hover { transform: scale(1.02); }
.uploaded { margin-top: 26px; }
.uploaded .huge { margin: 0 0 12px; font-size: 1.4rem; }
.uploaded-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.uploaded figure { margin: 0; }
.uploaded video { display: block; width: 100%; border-radius: 12px; }
.uploaded figcaption { margin-top: 5px; color: var(--mid); font-size: .86rem; }
.foot { position: relative; z-index: 1; padding: 14px 24px 80px 304px; color: var(--soft); font-size: .76rem; }

.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 26px; background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(6px); animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; } }
.m-card { display: grid; grid-template-columns: 1.1fr 1fr; width: min(980px, 100%); height: min(600px, 100%); overflow: hidden; border-radius: 20px; background: var(--card); animation: pop .42s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(14px); } }
.m-media { display: grid; place-items: center; min-height: 0; padding: 20px; background: var(--tint); }
.m-media img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.m-word { color: var(--hot); font: var(--head-weight) 1.8rem/1.15 var(--font-head); text-align: center; }
.m-body { position: relative; min-height: 0; overflow-y: auto; padding: 28px 24px; }
.m-body h2 { margin-bottom: 8px; padding-right: 36px; font-size: 1.55rem; }
.m-body > p:not(.eyebrow) { color: var(--mid); font-size: .95rem; }
.m-body h3 { margin: 16px 0 5px; color: var(--soft); font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.m-body ul { margin: 0; padding-left: 18px; color: var(--mid); font-size: .92rem; }
.m-result { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--hot); background: var(--tint); }
.m-result small { display: block; color: var(--soft); font-size: .7rem; }
.m-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.m-tags span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: .76rem; }
.m-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer; transition: background .25s, color .25s; }
.m-btn:hover { background: var(--hot); color: var(--on-hot); }
.m-close { position: absolute; top: 12px; right: 12px; font-size: 1.2rem; }
.m-steps { display: flex; gap: 8px; margin-top: 16px; }

.helper, .a11y { position: fixed; bottom: 22px; z-index: 50; }
.helper { right: 22px; }
.a11y { left: 22px; }
.helper-btn, .a11y-btn { width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--hot); color: var(--on-hot); font-size: 1.15rem; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .2); cursor: pointer; transition: transform .3s var(--ease); }
.helper-btn:hover, .a11y-btn:hover { transform: scale(1.08); }
.a11y-btn { background: var(--ink); color: var(--bg); font-size: .92rem; }
.helper-panel { position: absolute; right: 0; bottom: 60px; display: flex; flex-direction: column; width: min(340px, calc(100vw - 32px)); max-height: min(480px, 70vh); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 18px 44px rgba(0, 0, 0, .2); animation: pop .35s var(--ease); }
.helper-panel header { padding: 11px 14px; background: var(--hot); color: var(--on-hot); }
.helper-panel header b, .helper-panel header small { display: block; }
.helper-panel header small { font-size: .72rem; opacity: .85; }
.helper-log { flex: 1; min-height: 60px; overflow-y: auto; padding: 12px; font-size: .86rem; }
.helper-log p { max-width: 90%; margin-bottom: 7px; padding: 7px 10px; border-radius: 12px; background: var(--tint); }
.helper-log p.me { margin-left: auto; background: var(--hot); color: var(--on-hot); }
.helper-q { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 8px; }
.helper-q button { padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; background: none; font-size: .74rem; cursor: pointer; }
.helper-q button:hover { border-color: var(--hot); }
.helper-panel form { display: flex; gap: 6px; padding: 8px 12px 12px; }
.helper-panel input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--pale); border-radius: 99px; background: var(--bg); font-size: .86rem; }
.helper-panel form button { width: 34px; border: 0; border-radius: 50%; background: var(--hot); color: var(--on-hot); cursor: pointer; }
.a11y-panel { position: absolute; left: 0; bottom: 60px; width: 220px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-size: .86rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .2); animation: pop .35s var(--ease); }
.a11y-panel label { display: flex; gap: 7px; align-items: center; margin-top: 7px; }
.a11y-sizes { display: flex; gap: 5px; margin-top: 8px; }
.a11y-sizes button, .a11y-panel > button { padding: 4px 11px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.a11y-sizes button[aria-pressed="true"] { border-color: var(--hot); background: var(--hot); color: var(--on-hot); }
.a11y-panel > button { width: 100%; margin-top: 10px; }
html.hi-contrast { --mid: var(--ink); --soft: var(--ink); --line: var(--ink); }
html.links-line a, html.links-line .rail-nav button { text-decoration: underline; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
html.no-motion .lines { display: none; }

.ring { position: fixed; top: 0; left: 0; z-index: 99999; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .25s; }
.ring.on { opacity: 1; }
.ring.big { width: 58px; height: 58px; margin: -29px 0 0 -29px; }

body.ava-edit .tools-track { flex-wrap: wrap; width: auto; animation: none; }
body.ava-edit .tools-window { mask-image: none; -webkit-mask-image: none; }
body.ava-edit .rail { position: relative; height: auto; min-height: 100vh; }
body.ava-edit .card, body.ava-edit .node { cursor: text; }
body.ava-edit .home-bento .card:hover { transform: none; }
body.ava-edit .node small { max-height: 90px; margin-top: 5px; opacity: 1; }
body.ava-edit .helper, body.ava-edit .a11y, body.ava-edit .ring { display: none; }
.ava-edit-link { top: 42px !important; bottom: auto !important; }
.avatar.ava-img::after { display: none !important; }
.avatar.ava-img { cursor: pointer; outline: 2px dashed var(--hot); outline-offset: 3px; }

@media (max-width: 1100px) { .home-bento .card, .home-bento .card.big, .home-bento .card:nth-child(n+3) { grid-column: span 3; grid-row: auto; } .work-card, .work-card.wide, .quote { grid-column: span 3; } .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .node:not(:nth-child(4n))::after { content: none; } .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .app { display: block; }
  .brand-bar { position: absolute; top: 14px; left: 86px; }
  .draft-bar:not([hidden]) ~ .brand-bar { top: auto; margin-top: 14px; }
  .rail { position: relative; display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; height: auto; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .avatar { grid-row: span 2; width: 58px; height: 58px; margin: 0; }
  .rail-name { align-self: end; margin-top: 22px; }
  .rail-cta { display: none; }
  .rail-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 45; flex-direction: row; gap: 3px; margin: 0; padding: 8px; overflow-x: auto; border-top: 1px solid var(--line); background: var(--card); scrollbar-width: none; }
  .rail-nav button { flex: none; padding: 7px 11px; font-size: .84rem; }
  .views { padding: 22px 16px 26px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-bento .card, .home-bento .card.big, .home-bento .card:nth-child(n+3), .work-card, .work-card.wide, .quote { grid-column: span 2; }
  .tools { display: block; }
  .tools-label { margin-bottom: 7px; }
  .method { grid-template-columns: 1fr; }
  .role summary { grid-template-columns: 1fr auto; }
  .role summary small { grid-column: 1 / -1; }
  .foot { padding: 12px 16px 120px; }
  .helper { right: 14px; bottom: 66px; }
  .a11y { left: 14px; bottom: 66px; }
  .modal { padding: 0; }
  .m-card { display: block; height: 100%; overflow-y: auto; border-radius: 0; }
  .m-media { height: 38vh; }
  .m-body { overflow: visible; }
  .m-close { position: fixed; }
}
@media (hover: none), (pointer: coarse) { .ring { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01s !important; } .lines { display: none; } .ring { display: none; } }
@media print { .lines, .curtain, .ring, .helper, .a11y, .rail-nav { display: none !important; } .view { display: block; } }