/* ============ DESIGN TOKENS ============ */
 :root {
     --bg: #F6F1E8;
     --bg2: #EFE8DA;
     --card: #FFFDF7;
     --card2: #FBF7EE;
     --ink: #211B12;
     --ink2: #5C5443;
     --mut: #8B8271;
     --line: #DFD6C2;
     --line2: #CEC3AA;
     --accent: #B7412E;
     --accent-ink: #FFF6EF;
     --ok: #3D7A5C;
     --shadow: 0 1px 2px rgba(50, 38, 15, .06), 0 16px 40px -18px rgba(50, 38, 15, .18);
     --r: 14px;
     --r-lg: 22px;
     --f-d: 'Fraunces', Georgia, serif;
     --f-b: 'Instrument Sans', sans-serif;
     --f-m: 'Spline Sans Mono', monospace;
     --f-ne: 'Tiro Devanagari Sanskrit', serif;
     --f-nb: 'Mukta', sans-serif;
 }

 html.ne {
     --f-d: 'Tiro Devanagari Sanskrit', 'Fraunces', serif;
     --f-b: 'Mukta', 'Instrument Sans', sans-serif;
 }

 html[data-theme="dark"] {
     --bg: #1C1322;
     --bg2: #221829;
     --card: #251B2E;
     --card2: #2B2036;
     --ink: #F3EAF1;
     --ink2: #C6B4C9;
     --mut: #93829A;
     --line: #382A44;
     --line2: #4A3758;
     --accent: #E2684E;
     --accent-ink: #210D08;
     --ok: #7CCF9F;
     --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 44px -18px rgba(0, 0, 0, .65);
 }

 html[data-domain="personal"] {
     --r: 18px;
     --r-lg: 26px;
 }

 html[data-domain="personal"][data-theme="light"] {
     --bg: #F3ECDE;
     --bg2: #EBE2CF;
 }

 html[data-domain="personal"][data-theme="dark"] {
     --bg: #1D1426;
     --bg2: #231930;
 }

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

 html {
     scroll-behavior: smooth
 }

 body {
     background: var(--bg);
     color: var(--ink);
     font-family: var(--f-b);
     font-size: 16.5px;
     line-height: 1.65;
     -webkit-font-smoothing: antialiased;
     transition: background .35s ease, color .35s ease;
 }

 img {
     display: block;
     max-width: 100%
 }

 a {
     color: inherit;
     text-decoration: none
 }

 button {
     font-family: inherit;
     color: inherit;
     background: none;
     border: none;
     cursor: pointer
 }

 ::selection {
     background: var(--accent);
     color: var(--accent-ink)
 }

 :focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
     border-radius: 4px
 }

 .skip {
     position: fixed;
     left: -999px;
     top: 8px;
     z-index: 400;
     background: var(--ink);
     color: var(--bg);
     padding: .5rem 1rem;
     border-radius: 8px
 }

 .skip:focus {
     left: 8px
 }

 .wrap {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 clamp(1.1rem, 4vw, 2.5rem)
 }

 .mono {
     font-family: var(--f-m);
     letter-spacing: .02em
 }

 .ic {
     width: 1.05em;
     height: 1.05em;
     stroke: currentColor;
     stroke-width: 1.9;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     vertical-align: -.18em;
     flex: none
 }

 /* ============ SIMULATED ADDRESS BAR ============ */
 #addr {
     position: sticky;
     top: 0;
     z-index: 120;
     background: var(--bg2);
     border-bottom: 1px solid var(--line);
     transition: background .35s ease
 }

 #addr .in {
     display: flex;
     align-items: center;
     gap: .7rem;
     height: 38px;
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 clamp(.8rem, 3vw, 2rem);
     overflow-x: auto;
     scrollbar-width: none
 }

 #addr .in::-webkit-scrollbar {
     display: none
 }

 #addr .lockic {
     color: var(--ok)
 }

 #addrUrl {
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--ink2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     min-width: 0
 }

 #addr .tag {
     margin-left: auto;
     font-family: var(--f-m);
     font-size: .62rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--mut);
     border: 1px solid var(--line2);
     border-radius: 999px;
     padding: .18rem .55rem;
     white-space: nowrap
 }

 .d-pill {
     font-family: var(--f-m);
     font-size: .68rem;
     padding: .22rem .6rem;
     border-radius: 999px;
     border: 1px solid var(--line2);
     color: var(--ink2);
     white-space: nowrap;
     transition: .2s
 }

 .d-pill:hover {
     color: var(--ink)
 }

 .d-pill.on {
     background: var(--ink);
     color: var(--bg);
     border-color: var(--ink)
 }

 /* ============ HEADERS / NAV ============ */
 header.site {
     position: sticky;
     top: 0px;
     z-index: 110;
     background: color-mix(in srgb, var(--bg) 82%, transparent);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--line)
 }

 .nav {
     display: flex;
     align-items: center;
     gap: 1.4rem;
     height: 62px
 }

 .brand {
     font-family: var(--f-d);
     font-size: 1.06rem;
     font-weight: 600;
     letter-spacing: -.01em;
     display: flex;
     align-items: center;
     gap: .5rem;
     white-space: nowrap
 }

 .brand i {
     width: 7px;
     height: 7px;
     border-radius: 2px;
     background: var(--accent);
     display: inline-block;
     transform: rotate(45deg)
 }

 .navlinks {
     display: flex;
     gap: 1.35rem;
     margin-left: auto
 }

 .navlinks a {
     font-size: .9rem;
     color: var(--ink2);
     position: relative;
     padding: .2rem 0;
     transition: color .2s;
     white-space: nowrap
 }

 .navlinks a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     width: 0;
     height: 2px;
     background: var(--accent);
     transition: width .25s ease
 }

 .navlinks a:hover,
 .navlinks a.on {
     color: var(--ink)
 }

 .navlinks a.on::after,
 .navlinks a:hover::after {
     width: 100%
 }

 .ctrls {
     display: flex;
     align-items: center;
     gap: .35rem;
     margin-left: .4rem
 }

 .langT {
     display: flex;
     align-items: center;
     white-space: nowrap
 }

 .langT button {
     font-family: var(--f-m);
     font-size: .7rem;
     padding: .3rem .45rem;
     color: var(--mut);
     transition: .2s
 }

 .langT button.on {
     color: var(--ink);
     font-weight: 500
 }

 .langT span {
     color: var(--line2)
 }

 .iconbtn {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     display: grid;
     place-items: center;
     color: var(--ink2);
     border: 1px solid transparent;
     transition: .2s
 }

 .iconbtn:hover {
     color: var(--ink);
     border-color: var(--line2);
     background: var(--card)
 }

 .personalLink {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     font-family: var(--f-m);
     font-size: .7rem;
     color: var(--mut);
     padding: .3rem .55rem;
     border: 1px dashed var(--line2);
     border-radius: 999px;
     transition: .2s;
     white-space: nowrap
 }

 .personalLink:hover {
     color: var(--accent);
     border-color: var(--accent)
 }

 #burger {
     display: none
 }

 #mobMenu {
     position: fixed;
     inset: 0;
     z-index: 300;
     background: var(--bg);
     display: none;
     flex-direction: column;
     padding: 5.5rem 2rem 2rem
 }

 #mobMenu.open {
     display: flex
 }

 #mobMenu a {
     font-family: var(--f-d);
     font-size: 2rem;
     padding: .55rem 0;
     border-bottom: 1px solid var(--line)
 }

 #mobClose {
     position: absolute;
     top: 1.2rem;
     right: 1.4rem
 }

 /* ============ BUTTONS ============ */
 .btn {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     background: var(--ink);
     color: var(--bg);
     font-size: .94rem;
     font-weight: 500;
     padding: .85rem 1.5rem;
     border-radius: 999px;
     transition: transform .25s ease, box-shadow .25s ease
 }

 .btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow)
 }

 .btn .ic {
     transition: transform .25s
 }

 .btn:hover .ic {
     transform: translateX(4px)
 }

 .btn.line {
     background: transparent;
     color: var(--ink);
     border: 1.5px solid var(--ink)
 }

 .btn.sm {
     padding: .55rem 1.1rem;
     font-size: .86rem
 }

 .tlink {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     color: var(--ink2);
     font-size: .92rem;
     border-bottom: 1px solid var(--line2);
     padding-bottom: 2px;
     transition: .2s
 }

 .tlink:hover {
     color: var(--accent);
     border-color: var(--accent)
 }

 /* ============ SECTIONS / TYPO ============ */
 section.blk {
     padding: clamp(4rem, 9vw, 7.5rem) 0
 }

 .shead {
     display: flex;
     align-items: baseline;
     gap: 1.4rem;
     margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
     border-bottom: 1px solid var(--line);
     padding-bottom: 1.4rem
 }

 .shead .no {
     font-family: var(--f-m);
     font-size: .78rem;
     color: var(--accent)
 }

 .shead h2 {
     font-family: var(--f-d);
     font-weight: 500;
     font-size: clamp(1.9rem, 4.5vw, 2.9rem);
     letter-spacing: -.015em
 }

 .shead .side {
     margin-left: auto;
     font-size: .85rem;
     color: var(--mut);
     max-width: 260px;
     text-align: right
 }

 h1,
 h2,
 h3 {
     font-family: var(--f-d)
 }

 p.lead {
     font-size: 1.12rem;
     color: var(--ink2);
     max-width: 52ch
 }

 /* reveal */
 .rv {
     opacity: 0;
     transform: translateY(16px);
     transition: opacity .7s ease, transform .7s ease
 }

 .rv.in {
     opacity: 1;
     transform: none
 }

 /* ============ HERO ============ */
 #s-home {
     padding: clamp(1.5rem, 3.5vw, 3rem) 0 0;
 }

 .hero {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: clamp(2rem, 6vw, 5rem);
     align-items: center
 }

 .eyebrow {
     font-family: var(--f-m);
     font-size: .78rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--accent);
     display: flex;
     align-items: center;
     gap: .7rem;
     margin-bottom: 1.2rem
 }

 .eyebrow::before {
     content: "";
     width: 34px;
     height: 1.5px;
     background: var(--accent)
 }

 .hero h1 {
     position: relative;
     z-index: 0;
     font-weight: 480;
     font-size: clamp(2.9rem, 7.5vw, 5.6rem);
     line-height: 1.02;
     letter-spacing: -.02em
 }

 .hero h1 em {
     font-style: italic;
     font-weight: 400
 }

 .ghost {

     font-family: var(--f-ne);
     font-size: clamp(4.4rem, 10vw, 8.2rem);
     color: var(--accent);
     opacity: .1;
     pointer-events: none;
     user-select: none;
     animation: floaty 11s ease-in-out infinite alternate;
     line-height: 1;
     margin: 0 0 .5rem;
     transform: translateX(15%);
 }

 @keyframes floaty {
     from {
         transform: translateY(0) rotate(-2deg)
     }

     to {
         transform: translateY(14px) rotate(1deg)
     }
 }

 .tagline {
     font-family: var(--f-d);
     font-style: italic;
     font-size: clamp(1.25rem, 2.6vw, 1.7rem);
     color: var(--ink2);
     margin: 1.3rem 0 1.1rem
 }

 .tagline b {
     color: var(--accent);
     font-style: normal
 }

 .hero .intro {
     max-width: 46ch;
     color: var(--ink2);
     margin-bottom: 2rem
 }

 .cta {
     display: flex;
     flex-wrap: wrap;
     gap: 1.1rem;
     align-items: center
 }

 .portrait {
     position: relative;
     justify-self: center
 }

 .portrait img {
     width: min(360px, 80vw);
     aspect-ratio: 4/5;
     object-fit: cover;
     border-radius: var(--r);
     border: 1px solid var(--line2);
     box-shadow: var(--shadow);

 }

 .portrait .tape {
     position: absolute;
     top: -12px;
     left: 50%;
     width: 96px;
     height: 26px;
     background: rgba(183, 65, 46, .16);
     border: 1px solid rgba(183, 65, 46, .22);
     transform: translateX(-50%) rotate(-4deg);
     border-radius: 3px
 }

 .portrait figcaption {
     margin-top: .8rem;
     text-align: center;
     font-family: var(--f-m);
     font-size: .72rem;
     color: var(--mut);

 }

 .corner {
     position: absolute;
     width: 26px;
     height: 26px;
     border-left: 3px solid var(--accent);
     border-top: 3px solid var(--accent);
     top: -9px;
     left: -9px;
     transform: rotate(-1.6deg)
 }

 /* currently marquee */
 .strip {
     margin-top: clamp(3rem, 7vw, 5rem);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     overflow: hidden;
     background: var(--card)
 }

 .strip:hover .track {
     animation-play-state: paused
 }

 .track {
     display: inline-flex;
     white-space: nowrap;
     animation: slide 46s linear infinite;
     padding: .85rem 0
 }

 @keyframes slide {
     to {
         transform: translateX(-50%)
     }
 }

 .track .item {
     display: inline-flex;
     align-items: center;
     gap: .65rem;
     padding: 0 1.6rem;
     font-size: .92rem;
     color: var(--ink2)
 }

 .track .item b {
     color: var(--ink);
     font-weight: 600
 }

 .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--ok);
     position: relative;
     flex: none;
     display: inline-block
 }

 .dot::after {
     content: "";
     position: absolute;
     inset: -4px;
     border-radius: 50%;
     border: 1.5px solid var(--ok);
     opacity: .5;
     animation: pulse 1.8s ease-out infinite
 }

 @keyframes pulse {
     0% {
         transform: scale(.5);
         opacity: .7
     }

     100% {
         transform: scale(1.5);
         opacity: 0
     }
 }

 .track .lab {
     font-family: var(--f-m);
     font-size: .7rem;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--accent);
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     padding: 0 1.2rem
 }

 /* ============ ABOUT ============ */
 .about-grid {
     display: grid;
     grid-template-columns: .9fr 1.6fr;
     gap: clamp(2rem, 6vw, 5rem)
 }

 .about-grid .sticky {
     position: sticky;
     top: 120px;
     align-self: start
 }

 .sticky h3 {
     font-size: 1.15rem;
     font-weight: 600;
     margin-bottom: .5rem
 }

 .sticky p {
     font-size: .88rem;
     color: var(--mut)
 }

 .about-grid .prose p {
     margin-bottom: 1.2rem;
     color: var(--ink2)
 }

 .about-grid .prose p b {
     color: var(--ink)
 }

 .index-list {
     margin-top: 3rem;
     border-top: 1px solid var(--line)
 }

 .index-list .row {
     display: flex;
     align-items: baseline;
     gap: .8rem;
     padding: .8rem 0;
     border-bottom: 1px solid var(--line);
     transition: .2s
 }

 .index-list .row:hover {
     background: var(--card);
     padding-left: .6rem
 }

 .index-list .k {
     font-family: var(--f-d);
     font-size: 1.08rem;
     white-space: nowrap
 }

 .index-list .dots {
     flex: 1;
     border-bottom: 2px dotted var(--line2);
     transform: translateY(-5px);
     min-width: 30px
 }

 .index-list .v {
     font-size: .85rem;
     color: var(--mut);
     text-align: right
 }

 .edu {
     margin: 3.4rem 0 0
 }

 .edu-line {
     position: relative;
     height: 2px;
     background: var(--line2);
     margin: 2.6rem 0 .9rem;
     border-radius: 2px
 }

 .edu-line .fill {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     background: var(--accent);
     border-radius: 2px;
 }

 .edu-line i {
     position: absolute;
     top: 50%;
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: var(--bg);
     border: 2.5px solid var(--accent);
     transform: translateY(-50%)
 }

 .edu-line i:first-child {
     left: 0
 }

 .edu-line i:last-child {
     right: 0
 }

 .edu-line .mid {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background: var(--ink);
     color: var(--bg);
     font-size: .8rem;
     font-weight: 500;
     padding: .4rem 1rem;
     border-radius: 999px;
     white-space: nowrap
 }

 .edu-ends {
     display: flex;
     justify-content: space-between;
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--mut)
 }

 .edu p.note {
     margin-top: 1.4rem;
     font-size: .9rem;
     color: var(--ink2)
 }

 .ledger {
     margin-top: 3.4rem;
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--r);
     padding: 1.6rem 1.8rem;
     box-shadow: var(--shadow)
 }

 .ledger h4 {
     font-family: var(--f-m);
     font-size: .72rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 1.1rem
 }

 .ledger .row {
     display: flex;
     align-items: baseline;
     gap: .7rem;
     padding: .5rem 0;
     font-size: .95rem
 }

 .ledger .row .dots {
     flex: 1;
     border-bottom: 2px dotted var(--line);
     transform: translateY(-4px);
     min-width: 20px
 }

 .ledger .row .v {
     font-family: var(--f-m);
     font-size: .92rem
 }

 .ledger .row.now .v {
     color: var(--accent)
 }

 .ledger .foot {
     margin-top: 1rem;
     font-size: .82rem;
     font-style: italic;
     color: var(--mut);
     font-family: var(--f-d)
 }

 /* ============ PROJECTS ============ */
 .proj {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: clamp(1.6rem, 5vw, 4rem);
     align-items: center;
     margin-bottom: clamp(3.5rem, 7vw, 6rem)
 }

 .proj.rev {
     grid-template-columns: .85fr 1.15fr
 }

 .proj.rev .pimg {
     order: 2
 }

 .pimg img,
 .pimg .mockwrap {
     width: 100%;
     border-radius: var(--r-lg);
     border: 1px solid var(--line2);
     box-shadow: var(--shadow)
 }

 .pimg img {
     aspect-ratio: 4/3;
     object-fit: cover;
     transition: transform .5s ease
 }

 .pimg:hover img {
     transform: scale(1.015)
 }

 .pk {
     display: flex;
     align-items: center;
     gap: .8rem;
     margin-bottom: 1rem
 }

 .pk .no {
     font-family: var(--f-m);
     font-size: .72rem;
     color: var(--accent);
     letter-spacing: .14em;
     text-transform: uppercase
 }

 .pk .st {
     font-family: var(--f-m);
     font-size: .64rem;
     padding: .16rem .55rem;
     border: 1px solid var(--line2);
     border-radius: 999px;
     color: var(--mut)
 }

 .proj h3 {
     font-size: clamp(1.5rem, 3vw, 2.1rem);
     font-weight: 520;
     margin-bottom: .9rem;
     letter-spacing: -.01em
 }

 .proj .desc {
     color: var(--ink2);
     margin-bottom: 1.3rem
 }

 .chips {
     display: flex;
     flex-wrap: wrap;
     gap: .45rem;
     margin-bottom: 1.5rem
 }

 .chips span {
     font-family: var(--f-m);
     font-size: .68rem;
     padding: .28rem .6rem;
     border: 1px solid var(--line2);
     border-radius: 999px;
     color: var(--ink2);
     background: var(--card)
 }

 .bench {
     border-top: 1px solid var(--line);
     padding-top: 2.4rem
 }

 .bench h3 {
     font-size: 1.35rem;
     margin-bottom: 1.4rem
 }

 .bench .brow {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1rem 0;
     border-bottom: 1px solid var(--line)
 }

 .brow .ring {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: 2px dashed var(--accent);
     flex: none
 }

 .brow b {
     font-size: .98rem
 }

 .brow span {
     color: var(--mut);
     font-size: .85rem
 }

 .brow .tag {
     margin-left: auto;
     font-family: var(--f-m);
     font-size: .64rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--accent);
     border: 1px solid var(--accent);
     border-radius: 999px;
     padding: .15rem .55rem;
     opacity: .75;
     white-space: nowrap
 }

 /* NEBsphere phone mock */
 .mockwrap {
     display: grid;
     place-items: center;
     padding: 2rem;
     background: var(--card2)
 }

 .phone {
     width: min(290px, 100%);
     background: var(--card);
     border: 1.5px solid var(--line2);
     border-radius: 26px;
     overflow: hidden;
     box-shadow: var(--shadow)
 }

 .phone-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .8rem 1.1rem;
     border-bottom: 1px solid var(--line);
     font-family: var(--f-m);
     font-size: .72rem
 }

 .phone-top span {
     color: var(--ok);
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .phone-top span::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--ok)
 }

 .phone-body {
     padding: 1rem;
     min-height: 330px;
     display: flex;
     flex-direction: column
 }

 .mb-crumb {
     font-family: var(--f-m);
     font-size: .64rem;
     color: var(--mut);
     margin-bottom: .7rem;
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .mb-back {
     color: var(--accent);
     cursor: pointer;
     font-family: var(--f-m)
 }

 .mb-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     text-align: left;
     padding: .75rem .85rem;
     border: 1px solid var(--line);
     border-radius: 12px;
     margin-bottom: .5rem;
     font-size: .9rem;
     background: var(--bg);
     transition: .18s;
     cursor: pointer
 }

 .mb-item:hover {
     border-color: var(--accent);
     transform: translateX(3px)
 }

 .mb-item .ic {
     color: var(--mut)
 }

 .mb-hint {
     margin-top: auto;
     font-family: var(--f-m);
     font-size: .66rem;
     color: var(--mut);
     padding-top: .6rem;
     border-top: 1px dashed var(--line)
 }

 .mb-modes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .5rem
 }

 .mb-mode {
     padding: .8rem .5rem;
     border: 1px solid var(--line);
     border-radius: 12px;
     text-align: center;
     font-size: .85rem;
     background: var(--bg);
     cursor: pointer;
     transition: .18s
 }

 .mb-mode:hover {
     border-color: var(--accent);
     color: var(--accent)
 }

 .mb-mode.viva {
     grid-column: 1/-1;
     background: var(--ink);
     color: var(--bg);
     border-color: var(--ink)
 }

 /* detail pages */
 .detail {
     padding: clamp(3rem, 7vw, 5rem) 0 5rem
 }

 .backlink {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     font-family: var(--f-m);
     font-size: .78rem;
     color: var(--mut);
     margin-bottom: 2rem;
     transition: .2s;
     cursor: pointer
 }

 .backlink:hover {
     color: var(--accent)
 }

 .detail h1 {
     font-size: clamp(2.1rem, 5.5vw, 3.6rem);
     font-weight: 500;
     letter-spacing: -.015em;
     line-height: 1.08;
     max-width: 20ch
 }

 .meta {
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
     margin: 1.6rem 0 2.4rem;
     padding: 1.1rem 0;
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line)
 }

 .meta div {
     font-size: .85rem
 }

 .meta .k {
     font-family: var(--f-m);
     font-size: .64rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--mut);
     display: block;
     margin-bottom: .2rem
 }

 .detail .hero-img {
     width: 100%;
     aspect-ratio: 16/8;
     object-fit: cover;
     border-radius: var(--r-lg);
     border: 1px solid var(--line2);
     box-shadow: var(--shadow);
     margin-bottom: 3rem
 }

 .dsec {
     max-width: 720px;
     margin-bottom: 3rem
 }

 .dsec h3 {
     font-size: 1.3rem;
     margin-bottom: 1rem
 }

 .dsec p {
     color: var(--ink2);
     margin-bottom: 1rem
 }

 .dsec ul {
     list-style: none
 }

 .dsec li {
     padding: .6rem 0 .6rem 1.6rem;
     position: relative;
     color: var(--ink2);
     border-bottom: 1px solid var(--line)
 }

 .dsec li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 1.15rem;
     width: 9px;
     height: 9px;
     border-radius: 2px;
     background: var(--accent);
     transform: rotate(45deg)
 }

 .honest {
     max-width: 720px;
     background: var(--card2);
     border: 1px dashed var(--accent);
     border-radius: var(--r);
     padding: 1.2rem 1.5rem;
     font-size: .9rem;
     color: var(--ink2)
 }

 .honest b {
     color: var(--accent)
 }

 .flow {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: .7rem;
     margin: 1.5rem 0;
     font-family: var(--f-m);
     font-size: .72rem
 }

 .flow .fbox {
     border: 1.5px solid var(--line2);
     background: var(--card);
     border-radius: 10px;
     padding: .6rem .8rem;
     line-height: 1.4
 }

 .flow .fbox b {
     display: block;
     font-size: .78rem
 }

 .flow .arr {
     color: var(--accent);
     font-size: 1rem
 }

 .flow .down {
     flex-basis: 100%;
     color: var(--accent);
     padding-left: 1rem
 }

 .notebody p {
     margin-bottom: 1.2rem;
     color: var(--ink2);
     max-width: 640px
 }

 .signoff {
     font-family: var(--f-d);
     font-style: italic;
     font-size: 1.1rem;
     color: var(--accent);
     margin-top: 2rem
 }

 /* ============ JOURNEY ============ */
 .jwrap {
     position: relative;
     max-width: 680px;
     margin: 0 auto;
     padding-left: 2.4rem
 }

 .jthread {
     position: absolute;
     left: 8px;
     top: 6px;
     bottom: 6px;
     width: 2px;
     background: var(--line2);
     transform-origin: top
 }

 .jfill {
     position: absolute;
     left: 8px;
     top: 6px;
     width: 2px;
     background: var(--accent);
     height: 0
 }

 .jitem {
     position: relative;
     padding: 0 0 3rem
 }

 .jitem::before {
     content: "";
     position: absolute;
     left: calc(-2.4rem + 3px);
     top: .55rem;
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: var(--bg);
     border: 2.5px solid var(--accent)
 }

 .jitem.future::before {
     border-style: dashed
 }

 .jitem .era {
     font-family: var(--f-m);
     font-size: .72rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--accent);
     display: flex;
     align-items: center;
     gap: .6rem
 }

 .jitem h3 {
     font-size: 1.35rem;
     margin: .35rem 0 .4rem
 }

 .jitem p {
     color: var(--ink2);
     font-size: .97rem;
     max-width: 52ch
 }

 .jitem .nowlab {
     font-family: var(--f-m);
     font-size: .6rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--ok);
     display: inline-flex;
     align-items: center;
     gap: .4rem
 }

 .jitem.future .era {
     color: var(--mut)
 }

 .jitem.future h3 {
     color: var(--ink2)
 }

 /* ============ ACHIEVEMENTS ============ */
 .achrow {
     display: grid;
     grid-template-columns: 120px 1fr 280px;
     gap: 1.6rem;
     align-items: center;
     padding: 1.6rem 0;
     border-bottom: 1px solid var(--line)
 }

 .achrow .when {
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--accent)
 }

 .achrow .when small {
     display: block;
     color: var(--mut);
     letter-spacing: .12em;
     text-transform: uppercase;
     font-size: .6rem;
     margin-top: .2rem
 }

 .achrow h3 {
     font-size: 1.15rem;
     margin-bottom: .3rem
 }

 .achrow p {
     font-size: .9rem;
     color: var(--ink2)
 }

 .achrow .thumb {
     width: 280px;
     aspect-ratio: 4/3;
     object-fit: cover;
     border-radius: 12px;
     border: 1px solid var(--line2);
     cursor: zoom-in;
     transition: .25s
 }

 .achrow .thumb:hover {
     transform: scale(1.03);
     box-shadow: var(--shadow)
 }

 .shelf {
     display: flex;
     flex-wrap: wrap;
     gap: 1.2rem;
     margin-top: 2.6rem
 }

 .slot {
     flex: 1;
     min-width: 230px;
     border: 2px dashed var(--line2);
     border-radius: var(--r);
     padding: 2.2rem 1.4rem;
     text-align: center;
     color: var(--mut);
     transition: .25s;
     cursor: default
 }

 .slot:hover {
     border-color: var(--accent);
     color: var(--ink2)
 }

 .slot .ic {
     width: 22px;
     height: 22px;
     color: var(--accent);
     margin-bottom: .6rem
 }

 .slot p {
     font-size: .85rem
 }

 .shelf-note {
     margin-top: 1.4rem;
     font-family: var(--f-d);
     font-style: italic;
     font-size: .92rem;
     color: var(--mut)
 }

 /* ============ NOTES ============ */
 .noterow {
     display: grid;
     grid-template-columns: 130px 1fr auto;
     gap: 1.6rem;
     align-items: baseline;
     padding: 1.5rem 0;
     border-bottom: 1px solid var(--line);
     cursor: pointer;
     transition: .2s
 }

 .noterow:hover {
     background: var(--card);
     padding-left: .8rem
 }

 .noterow .date {
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--mut)
 }

 .noterow h3 {
     font-size: 1.28rem;
     margin-bottom: .25rem;
     transition: color .2s
 }

 .noterow:hover h3 {
     color: var(--accent)
 }

 .noterow .tag {
     font-family: var(--f-m);
     font-size: .62rem;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--accent);
     display: block;
     margin-bottom: .3rem
 }

 .noterow .prev {
     font-size: .9rem;
     color: var(--ink2);
     max-width: 64ch
 }

 .noterow .go {
     color: var(--mut);
     transition: .25s
 }

 .noterow:hover .go {
     color: var(--accent);
     transform: translateX(5px)
 }

 /* ============ CONTACT ============ */
 #s-contact .big {
     font-family: var(--f-d);
     font-size: clamp(2.6rem, 7vw, 4.6rem);
     font-weight: 480;
     letter-spacing: -.02em;
     line-height: 1.05;
     margin-bottom: 2rem
 }

 #s-contact .big em {
     font-style: italic;
     color: var(--accent)
 }

 .maillink {
     font-family: var(--f-d);
     font-size: clamp(1.3rem, 3.5vw, 2.1rem);
     border-bottom: 2px solid var(--accent);
     padding-bottom: 3px;
     transition: .2s;
     display: inline-block
 }

 .maillink:hover {
     color: var(--accent)
 }

 .soc {
     display: flex;
     gap: 1rem;
     margin-top: 2.6rem;
     flex-wrap: wrap
 }

 .soc a {
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     border: 1px solid var(--line2);
     border-radius: 999px;
     padding: .6rem 1.15rem;
     font-size: .88rem;
     color: var(--ink2);
     transition: .2s
 }

 .soc a:hover {
     border-color: var(--ink);
     color: var(--ink);
     transform: translateY(-2px)
 }

 .tz {
     margin-top: 2.2rem;
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--mut)
 }

 /* ============ FOOTER ============ */
 footer.site {
     border-top: 1px solid var(--line);
     padding: 3rem 0 2.2rem;
     margin-top: 2rem
 }

 .fgrid {
     display: flex;
     flex-wrap: wrap;
     gap: 2.5rem;
     justify-content: space-between;
     align-items: flex-start
 }

 .fgrid .fnote {
     max-width: 340px;
     font-size: .85rem;
     color: var(--mut)
 }

 .fgrid .fnote b {
     font-family: var(--f-d);
     color: var(--ink);
     font-size: 1rem
 }

 .fline {
     width: 44px;
     height: 2px;
     background: var(--accent);
     margin: .7rem 0
 }

 .fmeta {
     font-family: var(--f-m);
     font-size: .7rem;
     color: var(--mut);
     text-align: right;
     line-height: 2
 }

 /* ============ PERSONAL SITE ============ */
 #sitePersonal {
     display: none
 }

 html[data-domain="personal"] #sitePersonal {
     display: block
 }

 html[data-domain="personal"] #sitePublic {
     display: none
 }

 .pnav {
     display: flex;
     align-items: center;
     gap: 1.1rem;
     height: 66px
 }

 .seal {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--accent);
     color: var(--accent-ink);
     display: grid;
     place-items: center;
     font-family: var(--f-ne);
     font-size: 1.05rem;
     transform: rotate(-7deg);
     flex: none;
     box-shadow: var(--shadow)
 }

 .pnav .who {
     font-family: var(--f-m);
     font-size: .74rem;
     color: var(--ink2);
     line-height: 1.3
 }

 .pnav .who b {
     color: var(--ink);
     display: block;
     letter-spacing: .06em
 }

 .pnavlinks {
     display: flex;
     gap: 1.2rem;
     margin-left: auto;
     align-items: center
 }

 .pnavlinks button {
     font-size: .9rem;
     color: var(--ink2);
     padding: .2rem 0;
     border-bottom: 2px solid transparent;
     transition: .2s;
     white-space: nowrap
 }

 .pnavlinks button.on,
 .pnavlinks button:hover {
     color: var(--ink);
     border-color: var(--accent)
 }

 .pnavlinks .lock {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     font-family: var(--f-m);
     font-size: .72rem;
     color: var(--mut);
     border: 1px solid var(--line2);
     border-radius: 999px;
     padding: .3rem .7rem
 }

 .pnavlinks .lock:hover {
     border-color: var(--accent);
     color: var(--accent)
 }

 /* login */
 #loginView {
     min-height: calc(100vh);
     display: grid;
     place-items: center;
     padding: 2.5rem 1.2rem
 }

 .login-card {
     width: min(390px, 100%);
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--r-lg);
     box-shadow: var(--shadow);
     padding: 2.6rem 2.2rem;
     text-align: center
 }

 .login-card .seal {
     width: 58px;
     height: 58px;
     font-size: 1.5rem;
     margin: 0 auto 1.3rem
 }

 .login-card h1 {
     font-size: 1.65rem;
     font-weight: 520;
     margin-bottom: .4rem;
     letter-spacing: -.01em
 }

 .login-card .sub {
     font-size: .9rem;
     color: var(--mut);
     margin-bottom: 1.8rem
 }

 .field {
     text-align: left;
     margin-bottom: 1.1rem
 }

 .field label {
     display: block;
     font-family: var(--f-m);
     font-size: .66rem;
     letter-spacing: .13em;
     text-transform: uppercase;
     color: var(--mut);
     margin-bottom: .35rem
 }

 .field input {
     width: 100%;
     background: var(--bg);
     border: 1.5px solid var(--line2);
     border-radius: 12px;
     padding: .75rem .95rem;
     font: inherit;
     font-size: .95rem;
     color: var(--ink);
     transition: .2s
 }

 .field input:focus {
     outline: none;
     border-color: var(--accent)
 }

 .login-card .btn {
     width: 100%;
     justify-content: center;
     margin-top: .5rem
 }

 .login-err {
     display: none;
     margin: .9rem 0 0;
     font-size: .85rem;
     color: var(--accent)
 }

 .login-err.show {
     display: block;
     animation: shake .4s
 }

 @keyframes shake {

     0%,
     100% {
         transform: none
     }

     25% {
         transform: translateX(-5px)
     }

     75% {
         transform: translateX(5px)
     }
 }

 .demohint {
     margin-top: 1.6rem;
     border: 1px dashed var(--line2);
     border-radius: 12px;
     padding: .8rem;
     font-family: var(--f-m);
     font-size: .68rem;
     color: var(--mut);
     line-height: 1.8;
     text-align: left
 }

 .demohint b {
     color: var(--accent)
 }

 .serious {
     margin-top: 1.1rem;
     font-size: .74rem;
     color: var(--mut);
     font-style: italic;
     font-family: var(--f-d)
 }

 /* personal views */
 .pview {
     padding: 2.8rem 0 5rem;
     animation: fadein .45s ease
 }

 @keyframes fadein {
     from {
         opacity: 0;
         transform: translateY(10px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .pview-head {
     margin-bottom: 2.2rem
 }

 .pview-head h1 {
     font-size: clamp(1.9rem, 4.5vw, 2.8rem);
     font-weight: 500;
     letter-spacing: -.015em
 }

 .pview-head p {
     color: var(--mut);
     font-size: .95rem;
     margin-top: .3rem
 }

 .chips button.chip {
     font-family: var(--f-m);
     font-size: .72rem;
     padding: .4rem .95rem;
     border: 1px solid var(--line2);
     border-radius: 999px;
     color: var(--ink2);
     background: var(--card);
     transition: .2s
 }

 .chips button.chip.on {
     background: var(--ink);
     color: var(--bg);
     border-color: var(--ink)
 }

 .chips button.chip.future {
     border-style: dashed;
     color: var(--mut)
 }

 .masonry {
     columns: 4 230px;
     column-gap: 1rem;
     margin-top: 2rem
 }

 .ph {
     break-inside: avoid;
     margin-bottom: 1rem;
     position: relative;
     border-radius: var(--r);
     overflow: hidden;
     cursor: zoom-in;
     border: 1px solid var(--line);
     transition: .3s
 }

 .ph img {
     width: 100%;
     transition: transform .5s ease
 }

 .ph:hover img {
     transform: scale(1.04)
 }

 .ph .cap {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 1.6rem .8rem .6rem;
     background: rgba(20, 15, 5, .55);
     color: #fff;
     font-size: .78rem;
     opacity: 0;
     transform: translateY(6px);
     transition: .3s
 }

 .ph:hover .cap {
     opacity: 1;
     transform: none
 }

 .ph .new {
     position: absolute;
     top: .6rem;
     left: .6rem;
     font-family: var(--f-m);
     font-size: .58rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     background: var(--accent);
     color: var(--accent-ink);
     border-radius: 999px;
     padding: .2rem .55rem
 }

 .trip-scroll {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: min(290px, 78vw);
     gap: 1.3rem;
     overflow-x: auto;
     padding: .4rem .2rem 1.4rem;
     scroll-snap-type: x mandatory
 }

 .trip-scroll::-webkit-scrollbar {
     height: 6px
 }

 .trip-scroll::-webkit-scrollbar-thumb {
     background: var(--line2);
     border-radius: 3px
 }

 .tripcard {
     scroll-snap-align: start;
     cursor: pointer;
     transition: .25s
 }

 .tripcard:hover {
     transform: translateY(-4px)
 }

 .tripcard img {
     width: 100%;
     aspect-ratio: 4/5;
     object-fit: cover;
     border-radius: var(--r);
     border: 1px solid var(--line2);
     box-shadow: var(--shadow)
 }

 .tripcard h3 {
     font-size: 1.15rem;
     margin: 1rem 0 .15rem
 }

 .tripcard .loc {
     font-family: var(--f-m);
     font-size: .7rem;
     color: var(--accent);
     display: flex;
     align-items: center;
     gap: .4rem
 }

 .tripcard .dt {
     font-family: var(--f-m);
     font-size: .68rem;
     color: var(--mut)
 }

 .tripgrid {
     columns: 3 240px;
     column-gap: 1rem;
     margin-top: 2rem
 }

 .tripgrid img {
     width: 100%;
     break-inside: avoid;
     margin-bottom: 1rem;
     border-radius: var(--r);
     border: 1px solid var(--line2);
     cursor: zoom-in;
     transition: .3s
 }

 .tripgrid img:hover {
     transform: scale(1.02);
     box-shadow: var(--shadow)
 }

 .memline {
     position: relative;
     max-width: 640px;
     margin: 0 auto;
     padding-left: 2.2rem
 }

 .memline::before {
     content: "";
     position: absolute;
     left: 7px;
     top: 8px;
     bottom: 8px;
     width: 3px;
     background: var(--line2);
 }

 .memfill {
     position: absolute;
     left: 7px;
     top: 8px;
     width: 2px;
     background: var(--accent);
     height: 0;
 }

 .mem {
     position: relative;
     padding-bottom: 2.4rem
 }

 .mem::before {
     content: "";
     position: absolute;
     left: calc(-2.2rem + 2px);
     top: .5rem;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--accent)
 }

 .mem .date {
     font-family: var(--f-m);
     font-size: .7rem;
     color: var(--accent);
     letter-spacing: .1em
 }

 .mem p {
     color: var(--ink2);
     margin: .3rem 0 .7rem
 }

 .mem img {
     width: 130px;
     aspect-ratio: 4/3;
     object-fit: cover;
     border-radius: 10px;
     border: 1px solid var(--line2);
     cursor: zoom-in
 }

 .pgrid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.6rem;
     margin-top: 2rem
 }

 .post {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--r);
     overflow: hidden;
     display: flex;
     box-shadow: var(--shadow);
     transition: .25s
 }

 .post:hover {
     transform: translateY(-3px)
 }

 .post img {
     width: 150px;
     object-fit: cover;
     flex: none;
     border-right: 1px solid var(--line)
 }

 .post .pb {
     padding: 1.2rem 1.3rem
 }

 .post .date {
     font-family: var(--f-m);
     font-size: .66rem;
     color: var(--accent);
     letter-spacing: .1em
 }

 .post h3 {
     font-size: 1.15rem;
     margin: .25rem 0 .4rem
 }

 .post p {
     font-size: .87rem;
     color: var(--ink2)
 }

 /* admin */
 .admin-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.6rem;
     margin-top: 2rem
 }

 .panel {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--r);
     padding: 1.6rem;
     box-shadow: var(--shadow)
 }

 .panel h3 {
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     gap: .6rem;
     margin-bottom: 1.2rem
 }

 .panel h3 .ic {
     color: var(--accent)
 }

 .panel .btn {
     margin-top: .3rem
 }

 .upload-zone {
     border: 2px dashed var(--line2);
     border-radius: 12px;
     padding: 1.6rem 1rem;
     text-align: center;
     color: var(--mut);
     font-size: .85rem;
     cursor: pointer;
     transition: .2s;
     margin-bottom: 1rem
 }

 .upload-zone:hover {
     border-color: var(--accent);
     color: var(--ink2)
 }

 .upload-zone.has {
     border-color: var(--ok);
     color: var(--ok)
 }

 textarea {
     width: 100%;
     min-height: 96px;
     resize: vertical;
     background: var(--bg);
     border: 1.5px solid var(--line2);
     border-radius: 12px;
     padding: .75rem .95rem;
     font: inherit;
     font-size: .92rem;
     color: var(--ink)
 }

 textarea:focus {
     outline: none;
     border-color: var(--accent)
 }

 select {
     width: 100%;
     background: var(--bg);
     border: 1.5px solid var(--line2);
     border-radius: 12px;
     padding: .72rem .9rem;
     font: inherit;
     font-size: .92rem;
     color: var(--ink)
 }

 .admin-note {
     margin-top: 1.8rem;
     font-family: var(--f-d);
     font-style: italic;
     font-size: .88rem;
     color: var(--mut);
     max-width: 560px
 }

 /* ============ LIGHTBOX / TOAST ============ */
 #lightbox {
     position: fixed;
     inset: 0;
     z-index: 500;
     background: rgba(15, 11, 4, .92);
     display: none;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 2.5rem
 }

 #lightbox.open {
     display: flex;
     animation: fadein .3s
 }

 #lightbox img {
     max-width: min(920px, 92vw);
     max-height: 76vh;
     border-radius: 12px;
     object-fit: contain;
     box-shadow: 0 30px 80px rgba(0, 0, 0, .5)
 }

 #lbCap {
     color: #D8CFBD;
     font-family: var(--f-m);
     font-size: .78rem;
     margin-top: 1rem;
     text-align: center
 }

 .lb-x {
     position: absolute;
     top: 1.2rem;
     right: 1.4rem;
     color: #fff;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .25)
 }

 .lb-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: #fff;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     border: 1px solid rgba(255, 255, 255, .25)
 }

 .lb-prev {
     left: 1.2rem
 }

 .lb-next {
     right: 1.2rem
 }

 .lb-x:hover,
 .lb-nav:hover {
     background: rgba(255, 255, 255, .12)
 }

 #toast {
     position: fixed;
     left: 50%;
     bottom: 1.6rem;
     transform: translate(-50%, 120%);
     z-index: 600;
     background: var(--ink);
     color: var(--bg);
     padding: .8rem 1.4rem;
     border-radius: 999px;
     font-size: .88rem;
     display: flex;
     align-items: center;
     gap: .6rem;
     box-shadow: var(--shadow);
     transition: transform .4s cubic-bezier(.2, .9, .3, 1.2);
     max-width: 90vw
 }

 #toast.show {
     transform: translate(-50%, 0)
 }

 #toast .ic {
     color: var(--accent)
 }

 /* ============ RESPONSIVE ============ */
 @media(max-width:960px) {
     .hero {
         grid-template-columns: 1fr
     }

     .portrait {
         justify-self: start;
         margin-top: .5rem
     }

     .about-grid,
     .proj,
     .proj.rev {
         grid-template-columns: 1fr
     }

     .proj.rev .pimg {
         order: 0
     }

     .achrow {
         grid-template-columns: 1fr;
         gap: .8rem
     }

     .achrow .thumb {
         width: 280%;
         aspect-ratio: 4/3;
     }

     .pgrid,
     .admin-grid {
         grid-template-columns: 1fr
     }


 }

 @media(max-width:820px) {
     .navlinks {
         display: none
     }

     .nav .ctrls {
         margin-left: auto
     }

     .nav .ctrls .personalLink {
         display: none
     }

     #burger {
         display: grid
     }

     .shead .side {
         display: none
     }

     .noterow {
         grid-template-columns: 1fr auto
     }

     .noterow .date {
         display: none
     }

     #addr .tag {
         display: none
     }

     .pnav .who {
         display: none
     }

     .pnavlinks {
         overflow-x: auto;
         flex: 1;
         margin-left: .4rem;
         padding-bottom: 2px;
         scrollbar-width: none
     }

     .pnavlinks::-webkit-scrollbar {
         display: none
     }

     .post {
         flex-direction: column
     }

     .post img {
         width: 100%;
         height: 170px;
         border-right: none;
         border-bottom: 1px solid var(--line)
     }
 }

 @media(prefers-reduced-motion:reduce) {

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important
     }

     html {
         scroll-behavior: auto
     }
 }