:root {
    --bondi: #7ec8c3;
    --bondi-deep: #3d8a86;
    --aqua: #4ea3e0;
    --aqua-hi: #7ec8f0;
    --folder-yellow: #f5d76e;
    --folder-tab: #e8c85a;
    --paper: #f7f3ea;
    --ink: #1a1a18;
    --ink-soft: #4a4742;
    --chrome: #dfe6ef;
    --chrome-hi: #f4f7fb;
    --menubar: rgba(255, 255, 255, 0.72);
    --hairline: rgba(0, 0, 0, 0.18);
    --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --accent: #0a7aff;
    --label: #1d1d1f;
    --label-2: #48484a;
    --label-3: #86868b;
    --display: "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
    --doc: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --mono: "Courier Prime", "Courier New", Courier, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-win: 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 40px 90px -18px rgba(0, 0, 0, 0.55), 0 14px 34px -10px rgba(0, 0, 0, 0.3);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #05070a;
    color: var(--ink);
    font-family: var(--ui);
    min-height: 100%;
}

html[data-phase="intro"],
html[data-phase="intro"] * {
    cursor: none !important;
}

html[data-phase="desk"] {
    cursor: auto;
}

@media (hover: hover) and (pointer: fine) {
    html[data-phase="desk"],
    html[data-phase="desk"] * {
        cursor: none !important;
    }
}

/* Contact form: the custom cursor is a fixed SVG that can't turn into a text
   caret over real inputs, so this one window falls back to the native
   cursor while the person is filling it in. */




img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 400;
    background: #fff;
    color: #000;
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 4px;
}

.skip-link:focus {
    top: 1rem;
}

/* ========== Intro ========== */
#intro {
    position: relative;
    z-index: 40;
}

#intro.done {
    pointer-events: none;
}

.intro-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    perspective: 1400px;
}

.intro-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.intro-video iframe,
.intro-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    transform: translate(-50%, -50%) scale(1.08);
    border: 0;
    pointer-events: none;
    object-fit: cover;
}

.intro-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, transparent 20%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    pointer-events: none;
}

.layer {
    position: absolute;
    left: 50%;
    bottom: 0;
    top: auto;
    width: min(78vh, 560px);
    height: min(94vh, 860px);
    transform: translate3d(-50%, 0, 40px);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    opacity: 0;
    pointer-events: none;
}
#layer-closed {
    opacity: 1;
}

.layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.55));
    user-select: none;
    -webkit-user-drag: none;
}

.layer.is-gone {
    opacity: 0;
    pointer-events: none;
}

#layer-lower {
    z-index: 3;
}
#layer-forehead {
    z-index: 4;
}
#layer-open {
    z-index: 5;
}
#layer-closed {
    z-index: 6;
    opacity: 1;
}

.intro-hint {
    position: absolute;
    top: 5.2%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: var(--ui);
    font-size: 0.8rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 2px 16px #000;
}

/* Large welcome line in the opening sequence. Sits above the veil but
   behind the portrait stage, at 50% opacity. It is centred in the free band
   between the Scroll labels (top ~12.5%) and the light bulb's resting spot
   (~60% of the height minus ~290px), so the head and the bulb never sit on it. */
.intro-welcome {
    --welcome-lines: 2;
    position: absolute;
    left: 50%;
    top: max(12.5%, calc((12.5% + 60% - 292px) / 2 - var(--welcome-lines) * 0.5em));
    z-index: 1;
    width: min(94vw, 1500px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    text-wrap: balance;
    text-transform: uppercase;
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.4rem, min(8.2vw, 10.5vh), 8rem);
    line-height: 0.98;
    letter-spacing: 0.05em;
    color: #fff;
    opacity: 0.55;
    text-shadow: 0 8px 56px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.intro-unlock {
    position: absolute;
    left: 50%;
    top: 8.8%;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 6;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.8);
    font: 0.68rem/1 var(--ui);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    cursor: none;
}

.intro-unlock[hidden] {
    display: none;
}

.intro-spacer {
    height: 620vh;
}

html[data-phase="desk"] #intro {
    display: none;
}

/* ========== Desktop ========== */
#desktop {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(1200px 700px at 70% 0%, rgba(126, 200, 195, 0.18), transparent 55%),
        radial-gradient(900px 500px at 10% 100%, rgba(40, 70, 90, 0.45), transparent 50%),
        linear-gradient(180deg, #16324a 0%, #0c1c28 42%, #081018 100%);
}

html[data-phase="desk"] #desktop {
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
}

html[data-phase="desk"],
html[data-phase="desk"] body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Desktop wallpaper: a real <img> (so it has alt text, dimensions and can be
   indexed) stretched edge to edge behind everything on the desk. The gradients
   on #desktop stay underneath as the fallback while the image loads. */
.desk-wallpaper {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

#desktop::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    opacity: 0.35;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.menubar {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 10px;
    background: rgba(14, 18, 30, 0.34);
    backdrop-filter: blur(40px) saturate(190%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    font: 500 13px/1 var(--ui);
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    user-select: none;
}

.menubar-left,
.menubar-right {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.menubar a,
.menubar button.menu-item {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: none;
    transition: background 0.18s ease;
}

.menubar a:hover,
.menubar button.menu-item:hover,
.menubar a:focus-visible,
.menubar button.menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    outline: none;
}

.menubar .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 7px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.menubar .mark {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.menubar-right > span,
.menu-clock {
    padding: 0 9px;
    white-space: nowrap;
}

.menu-clock {
    font-variant-numeric: tabular-nums;
}

.menubar .sound svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menubar .sound .slash,
.menubar .sound.off .waves {
    display: none;
}

.menubar .sound.off .slash {
    display: block;
}

/* Menu bar, current macOS: no rule line, softer glass, rounder hover pills */
.menubar {
    border-bottom: 0;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(10, 16, 34, 0.38), rgba(10, 16, 34, 0.14));
}

.menubar a,
.menubar button.menu-item {
    height: 24px;
    border-radius: 8px;
}

.desk-field {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    z-index: 2;
}

/* .desk-field creates its own stacking context (it's positioned with an
   explicit z-index), so every descendant - including a maximized window
   with position:fixed and a very high z-index of its own - is trapped
   inside that context and compared against the menubar/dock as a single
   unit at z-index:2. That unit loses to the menubar (30) and dock (20),
   which is why a maximized window was getting covered by them. While a
   window inside is maximized, lift the whole field above both so the
   maximized window's own stacking order can finally take effect. */
.desk-field.has-maximized {
    z-index: 600;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- Desktop icons ---------- */
.icon-grid {
    position: absolute;
    top: 40px;
    left: 24px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    max-height: calc(100% - 56px);
    gap: 12px 8px;
}

.desk-icon {
    display: block;
    width: 96px;
    padding: 8px 4px 6px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: none;
    outline: none;
    transition: background 0.2s ease;
}

.desk-icon .glyph {
    display: block;
    width: 68px;
    height: 57px;
    margin: 0 auto 7px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
    transition: transform 0.4s var(--ease);
}

.desk-icon .doc-glyph {
    width: 46px;
    height: 58px;
}

.desk-icon .glyph-bin {
    width: 52px;
    height: 59px;
}

.desk-icon:hover .glyph {
    transform: translateY(-2px) scale(1.04);
}

.desk-icon .label {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px 3px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.004em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    border-radius: 6px;
}

.desk-icon.is-selected,
.desk-icon:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}

.desk-icon:focus-visible .label,
.desk-icon.is-selected .label {
    background: var(--accent);
    text-shadow: none;
}

.trash-slot {
    position: absolute;
    right: 28px;
    bottom: 12px;
}

/* ---------- Dock: glass shelf with icon tiles ---------- */
.dock {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding: 0 0 10px;
    pointer-events: none;
}

.dock-inner {
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(38px) saturate(200%);
    -webkit-backdrop-filter: blur(38px) saturate(200%);
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 22px 50px -10px rgba(0, 0, 0, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.18);
}

.dock a,
.dock button {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 23%;
    background: var(--tile, #ccc);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: none;
    transform-origin: 50% 100%;
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.55),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        0 7px 14px -5px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s var(--ease);
}

.dock .dk-glyph {
    width: 28px;
    height: 28px;
    fill: currentColor;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}

.dock .dk-home { --tile: linear-gradient(180deg, #5ab8ff, #0a6cff); }
.dock .dk-bound { --tile: linear-gradient(180deg, #ffcb52, #f2a20c); }
.dock .dk-action { --tile: linear-gradient(180deg, #ff8d78, #ee4a38); }
.dock .dk-brew { --tile: linear-gradient(180deg, #62dfd2, #17a294); }
.dock .dk-trash { --tile: linear-gradient(180deg, #eef2f7, #a9b5c4); color: #4a5668; margin-left: 12px; }
.dock .dk-trash .dk-glyph { filter: none; }
.dock .dk-trash::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.dock .tip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    translate: -50% 4px;
    transform-origin: 50% 100%;
    padding: 5px 11px;
    border-radius: 9px;
    background: rgba(246, 246, 248, 0.84);
    color: var(--label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, translate 0.2s var(--ease);
}

.dock a:hover .tip,
.dock button:hover .tip,
.dock a:focus-visible .tip,
.dock button:focus-visible .tip {
    opacity: 1;
    translate: -50% 0;
}

.dock a:focus-visible,
.dock button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.dock [data-running]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

@media (hover: hover) and (pointer: fine) {
    .dock-inner > *:hover {
        transform: translateY(-10px) scale(1.3);
    }
    .dock-inner > *:hover .tip {
        scale: 0.77;
    }
    .dock-inner > *:hover + *,
    .dock-inner > *:has(+ *:hover) {
        transform: translateY(-4px) scale(1.1);
    }
}

.form-frame-wrap {
    margin-top: 14px;
    border: 0.5px solid rgba(0, 0, 0, 0.16);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.form-frame-wrap iframe {
    display: block;
    width: 100%;
    height: min(640px, 60vh);
    border: 0;
}

#win-talk { top: 9%; left: 22%; }

#win-readme { top: 10%; left: 20%; }
#win-bound { top: 11%; left: 14%; }
#win-action { top: 13%; left: 18%; }
#win-brewing { top: 15%; left: 22%; }
#win-trash { top: 18%; left: 28%; }
#win-bhoyabbhontor { top: 12%; left: 24%; }
#win-ghurnipara { top: 14%; left: 26%; }
#win-lilys-lament { top: 13%; left: 21%; }
#win-untitled-middle-age-crisis-novel { top: 12%; left: 19%; }
#win-shards-of-sundial-city { top: 15%; left: 23%; }
#win-rent-free-ghosts { top: 11%; left: 25%; }
#win-the-boatman { top: 16%; left: 17%; }
#win-the-remainder { top: 10%; left: 22%; }
#win-the-clay-lamp { top: 14%; left: 20%; }
#win-untitled-two-part-short-film { top: 12%; left: 16%; }
#win-kokalondho { top: 15%; left: 24%; }
#win-promod-dar-circus { top: 13%; left: 18%; }
#win-miran { top: 16%; left: 26%; }
#win-draevena-series { top: 12%; left: 21%; }
#win-what-dracula-told-me { top: 18%; left: 30%; }

/* ---------- Windows: Liquid Glass ---------- */
.window {
    position: absolute;
    top: 12%;
    left: 18%;
    width: min(720px, calc(100vw - 48px));
    max-height: min(72vh, 640px);
    display: none;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    z-index: 10;
    color: var(--label);
    background: rgba(248, 248, 251, 0.93);
    backdrop-filter: blur(56px) saturate(190%);
    -webkit-backdrop-filter: blur(56px) saturate(190%);
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.26),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
        0 12px 32px -8px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease;
}

.window:not(.is-dragging) {
    transition:
        box-shadow 0.3s ease,
        top 0.32s var(--ease),
        left 0.32s var(--ease),
        width 0.32s var(--ease),
        height 0.32s var(--ease),
        max-height 0.32s var(--ease),
        border-radius 0.32s var(--ease),
        transform 0.32s var(--ease);
}

.window.open {
    display: flex;
    animation: winIn 0.34s var(--ease);
}

.window.front {
    z-index: 16;
    box-shadow: var(--shadow-win);
}

/* Maximize (the green traffic light): true fullscreen, the way a real Mac
   app goes fullscreen on the green button - it covers the entire screen,
   edge to edge, with the menu bar and dock tucked away behind it. It is
   fixed to the viewport (not the desk area) so it also covers the space
   the menu bar and dock occupy, and sits above both in stacking order. */
.window.maximized {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    transform: none !important;
    z-index: 500 !important;
}

@keyframes winIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.window.doc-txt {
    width: min(640px, calc(100vw - 48px));
    max-height: min(68vh, 580px);
}

.window.contact-embed {
    width: min(560px, calc(100vw - 48px));
    max-height: min(86vh, 760px);
}

.titlebar {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 52px;
    padding: 0 20px;
    background: transparent;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.09);
    cursor: none;
    user-select: none;
}

.titlebar h2,
.titlebar .win-title {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 96px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: rgba(29, 29, 31, 0.88);
    pointer-events: none;
    transition: color 0.3s ease;
}

.window:not(.front) .titlebar h2 {
    color: rgba(29, 29, 31, 0.5);
}

.traffic {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
}

.traffic button,
.traffic a.close,
.traffic span.min,
.traffic span.zoom {
    position: relative;
    display: inline-block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: none;
    overflow: hidden;
    text-indent: -999px;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: background 0.2s ease;
}

.traffic .close { background: #ff5f57; }
.traffic .min { background: #febc2e; }
.traffic .zoom { background: #28c840; }

.traffic .close::after,
.traffic .min::after,
.traffic .zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    transition: opacity 0.15s ease;
}

.traffic .close::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M4.2 4.2l4.6 4.6M8.8 4.2L4.2 8.8' stroke='%23000' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.traffic .min::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3.7 6.5h5.6' stroke='%23000' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.traffic .zoom::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 3.8v5.4M3.8 6.5h5.4' stroke='%23000' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }

.traffic:hover .close::after,
.traffic:hover .min::after,
.traffic:hover .zoom::after {
    opacity: 1;
}

.window:not(.front) .traffic > * {
    background: #cfcfd4;
}

.window:not(.front) .traffic:hover .close { background: #ff5f57; }
.window:not(.front) .traffic:hover .min { background: #febc2e; }
.window:not(.front) .traffic:hover .zoom { background: #28c840; }

.window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 22px 30px 34px;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
    overscroll-behavior: contain;
}

.window.doc-txt .window-body,
.window.contact-embed .window-body {
    font-family: var(--ui);
    font-size: 15px;
}

.window-body h1,
.article-page h1 {
    margin: 0 0 0.4rem;
    font-family: var(--ui);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--label);
}

.window-body h3 {
    margin: 2px 0 12px;
    font-family: var(--ui);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--label);
}

.kicker {
    margin: 0 0 6px;
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    color: var(--label-3);
}

.lede,
.article-page p,
.window-body p {
    margin: 0 0 14px;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.006em;
    color: var(--label-2);
}

.window-body p.kicker,
.article-page p.kicker {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--label-3);
}

.window-body p a,
.article-page p a,
.related a {
    color: #0a5fd6;
    text-decoration: underline;
    text-decoration-color: rgba(10, 95, 214, 0.32);
    text-underline-offset: 3px;
}

.window-body p a:hover,
.article-page p a:hover {
    text-decoration-color: currentColor;
}

.status-pill {
    --pc: #0a5ad4;
    --pbg: rgba(10, 122, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 4px 11px 4px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--pbg);
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pc);
}

.window-body p.status-pill,
.article-page p.status-pill {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--pc);
}

.status-pill::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pc);
}

.status-pill[data-cat="bound"] { --pc: #9a5b00; --pbg: rgba(245, 166, 35, 0.17); }
.status-pill[data-cat="action"] { --pc: #c2321d; --pbg: rgba(255, 95, 70, 0.14); }
.status-pill[data-cat="brewing"] { --pc: #0a7f73; --pbg: rgba(30, 180, 165, 0.16); }
.status-pill[data-cat="trash"] { --pc: #55555a; --pbg: rgba(120, 120, 128, 0.16); }

/* ---------- Wanna Talk to Me: the note form ---------- */
.talk-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
}

.field-label {
    margin: 0 0 7px;
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--label);
}

.field-hint {
    margin: -2px 0 8px;
    font-family: var(--ui);
    font-size: 12px;
    line-height: 1.4;
    color: var(--label-3);
}

.field-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    border-radius: 12px;
    background: rgba(120, 130, 145, 0.07);
    color: var(--label);
    font-family: var(--ui);
    font-size: 15px;
    letter-spacing: -0.006em;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.field-input::placeholder {
    color: var(--label-3);
}

.field-textarea {
    resize: vertical;
    min-height: 92px;
    line-height: 1.5;
    font-family: var(--ui);
}

.field-input:hover {
    border-color: rgba(0, 0, 0, 0.18);
}

.field-input:focus {
    border-color: var(--accent);
    background: rgba(10, 122, 255, 0.05);
    box-shadow: 0 0 0 3.5px rgba(10, 122, 255, 0.16);
}

.field-input.invalid {
    border-color: #ff3b30 !important;
    background: rgba(255, 59, 48, 0.05) !important;
    box-shadow: 0 0 0 3.5px rgba(255, 59, 48, 0.14) !important;
}

.field-error {
    min-height: 15px;
    margin: 6px 1px 0;
    font-family: var(--ui);
    font-size: 12.5px;
    line-height: 1.3;
    color: #ff3b30;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.field-error:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.phone-row {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(0, 0, 0, 0.11);
    border-radius: 12px;
    background: rgba(120, 130, 145, 0.07);
    overflow: hidden;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.phone-row:hover {
    border-color: rgba(0, 0, 0, 0.18);
}

.phone-row:focus-within {
    border-color: var(--accent);
    background: rgba(10, 122, 255, 0.05);
    box-shadow: 0 0 0 3.5px rgba(10, 122, 255, 0.16);
}

.phone-row.invalid {
    border-color: #ff3b30 !important;
    background: rgba(255, 59, 48, 0.05) !important;
    box-shadow: 0 0 0 3.5px rgba(255, 59, 48, 0.14) !important;
}

.country-select {
    flex: 0 0 auto;
    max-width: 132px;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(120, 130, 145, 0.08);
    color: var(--label);
    font-family: var(--ui);
    font-size: 14px;
    padding: 11px 8px 11px 12px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.phone-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--label);
    font-family: var(--ui);
    font-size: 15px;
    letter-spacing: -0.006em;
    padding: 11px 14px;
    outline: none;
}

.phone-input::placeholder {
    color: var(--label-3);
}

@keyframes talkShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

.field.shake {
    animation: talkShake 0.4s ease;
}

.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.verify-field {
    display: flex;
    justify-content: center;
    margin-top: -2px;
}

.verify-field[hidden] {
    display: none;
}

.verify-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 300px;
    padding: 13px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: rgba(120, 130, 145, 0.07);
    color: var(--label-3);
}

.verify-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.verify-label {
    font-family: var(--ui);
    font-size: 12.5px;
    letter-spacing: -0.006em;
}

.form-status:not(:empty) {
    margin: 0 0 2px;
    padding: 9px 12px;
    border-radius: 10px;
    text-align: center;
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #b3261e;
    background: rgba(255, 59, 48, 0.1);
    animation: talkShake 0.4s ease;
}

.form-status.ok:not(:empty) {
    color: #1a7f46;
    background: rgba(52, 199, 89, 0.14);
    animation: none;
}

.form-error {
    margin: 0;
    padding: 0 2px;
    text-align: center;
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.4;
    color: #ff3b30;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.form-error:not(:empty) {
    opacity: 1;
    transform: translateY(0);
    animation: talkShake 0.4s ease;
}

.form-actions {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.submit-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 11px 22px;
    background: var(--accent);
    color: #fff;
    font-family: var(--ui);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.006em;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(10, 122, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.submit-btn:hover {
    background: #2a8bff;
    box-shadow: 0 8px 20px -6px rgba(10, 122, 255, 0.6);
}

.submit-btn:active {
    transform: scale(0.96);
}

.submit-btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.submit-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.submit-btn:hover .submit-arrow {
    transform: translateX(2px);
}

.submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    animation: talkSpin 0.7s linear infinite;
}

@keyframes talkSpin {
    to { transform: rotate(360deg); }
}

.submit-btn.is-sending .submit-arrow {
    display: none;
}

.submit-btn.is-sending .submit-spinner {
    display: inline-block;
}

.submit-btn.is-sending .submit-label::after {
    content: "ing";
}

/* ---------- Thank-you state ---------- */
.talk-thanks {
    padding: 26px 6px 8px;
    text-align: center;
}

.talk-thanks.show {
    animation: thanksIn 0.42s var(--ease);
}

@keyframes thanksIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.thanks-check {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    color: #28c840;
}

.check-circle {
    stroke-dasharray: 182;
    stroke-dashoffset: 182;
    animation: talkDrawCircle 0.5s ease forwards;
}

.check-mark {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: talkDrawCheck 0.32s 0.42s ease forwards;
}

@keyframes talkDrawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes talkDrawCheck {
    to { stroke-dashoffset: 0; }
}

.thanks-title {
    margin: 0 0 8px;
}

.thanks-text {
    max-width: 380px;
    margin: 0 auto 20px;
}

.thanks-reset {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    padding: 9px 18px;
    background: rgba(120, 130, 145, 0.08);
    color: var(--label);
    font-family: var(--ui);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.thanks-reset:hover {
    background: rgba(120, 130, 145, 0.16);
    border-color: rgba(0, 0, 0, 0.22);
}

.file-list {
    --dc: #aab1bf;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px 6px;
    padding: 6px 0 8px;
}

#win-bound .file-list { --dc: #f2b53a; }
#win-action .file-list { --dc: #ee5a44; }
#win-brewing .file-list { --dc: #2fb8aa; }
#win-trash .file-list { --dc: #8e8e93; }

.file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 6px 10px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--label);
    font: 500 12px/1.3 var(--ui);
    text-align: center;
    text-decoration: none;
    cursor: none;
    outline: none;
    transition: background 0.2s ease;
}

.file-item .doc-glyph {
    width: 46px;
    height: 58px;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.18));
    transition: transform 0.35s var(--ease);
}

.file-item .name {
    max-width: 100%;
    padding: 2px 7px 3px;
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.file-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.file-item:hover .doc-glyph {
    transform: translateY(-2px);
}

.file-item:hover .name {
    background: rgba(10, 122, 255, 0.14);
    color: #0a58c8;
}

.file-item:focus-visible,
.file-item:active {
    background: rgba(10, 122, 255, 0.1);
}

.file-item:focus-visible .name,
.file-item:active .name {
    background: var(--accent);
    color: #fff;
}

.faq dt {
    margin-top: 20px;
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--label);
}

.faq dd {
    margin: 4px 0 0;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.006em;
    color: var(--label-2);
}

#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 2147483647;
    opacity: 0;
    transform: translate(-50%, -50%);
}

html[data-phase="desk"] #cursor {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    html[data-phase="desk"] #cursor {
        opacity: 1;
    }
}

#cursor svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.seo-ledger,
.ledger.sr-only {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.ledger h2 {
    font-family: var(--doc);
    font-size: 1.6rem;
    margin: 1.6rem 0 0.6rem;
}

.ledger article {
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ledger a {
    color: #0b4f9c;
}

.site-end {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 0 16px 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 11px;
    /* keeps the footer readable over the light part of the wallpaper */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.35);
}

.site-end a {
    color: #c8fff8;
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 255, 248, 0.4);
}

.site-end p {
    margin: 0;
}

.site-end .copy {
    opacity: 0.95;
}

.site-end .copy::before {
    content: "\00b7";
    margin-right: 14px;
}

.site-end .dmca {
    display: flex;
    line-height: 0;
}

.site-end a.dmca-badge {
    display: inline-block;
    border-bottom: 0;
    line-height: 0;
    opacity: 0.92;
    transition: opacity 0.25s ease;
}

.site-end a.dmca-badge:hover,
.site-end a.dmca-badge:focus-visible {
    opacity: 1;
}

.site-end a.dmca-badge img {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Inner document pages (static SEO pages under /atelier/...) */
.page-shell {
    min-height: 100vh;
    padding: 48px 16px 56px;
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(126, 200, 195, 0.2), transparent 50%),
        #0c1c28 url("/atelier/images/atelier-desk.webp") center / cover fixed;
}

.page-window {
    max-width: 820px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    color: var(--label);
    background: rgba(248, 248, 251, 0.93);
    backdrop-filter: blur(56px) saturate(190%);
    -webkit-backdrop-filter: blur(56px) saturate(190%);
    box-shadow: var(--shadow-win);
}

.page-shell .titlebar {
    cursor: default;
}

.page-shell .titlebar .traffic a,
.page-shell .titlebar .traffic span {
    cursor: default;
}

.crumb {
    margin: 0 0 1.2rem;
    font-size: 12px;
    color: var(--label-3);
}

.crumb a {
    color: #0a5fd6;
    text-decoration: none;
}

.article-page {
    padding: 22px 30px 34px;
}

.page-footer {
    max-width: 820px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.page-footer a {
    color: #c8fff8;
}

#yt-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 720px) {
    .icon-grid {
        left: 12px;
        top: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        width: calc(100% - 24px);
        gap: 16px;
    }
    .trash-slot {
        right: 12px;
        bottom: 96px;
    }
    .window {
        top: 8%;
        left: 4%;
        width: 92%;
        max-height: 78vh;
    }
    .layer {
        width: min(96vw, 420px);
        height: min(86vh, 680px);
    }
    .intro-hint {
        top: 4%;
    }
    .intro-unlock {
        top: 7.5%;
    }
    .intro-welcome {
        --welcome-lines: 2;
        width: 90vw;
        font-size: clamp(2rem, 10.5vw, 4rem);
        letter-spacing: 0.03em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intro-spacer {
        height: 0;
    }
    .window.open {
        animation: none;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== Desk widgets ========== */
.widgets {
    position: absolute;
    top: 18px;
    right: 28px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, 154px);
    grid-auto-rows: 154px;
    gap: 14px;
    font-family: var(--ui);
    user-select: none;
}

.widget {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 0 0 0.5px rgba(255, 255, 255, 0.28),
        0 14px 34px -8px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    transition: transform 0.5s var(--ease);
    animation: widgetIn 0.9s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 110ms + 250ms);
}

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

@keyframes widgetIn {
    from {
        opacity: 0;
        translate: 0 14px;
        scale: 0.97;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

.w-clock {
    background: linear-gradient(160deg, rgba(40, 42, 56, 0.84), rgba(10, 11, 18, 0.88));
    padding: 8px;
}

.w-clock svg {
    display: block;
    width: 100%;
    height: 100%;
    font-family: var(--ui);
}

.w-clock .hands {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.w-cal {
    background: rgba(255, 255, 255, 0.82);
    color: #1c1c1e;
    padding: 11px 11px 9px;
}

.cal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 3px;
}

.cal-head #cal-month {
    color: #ff3b30;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cal-head #cal-year {
    color: #8e8e93;
    font-size: 11px;
    font-weight: 600;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 15.5px;
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 500;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cal-grid i {
    display: grid;
    place-items: center;
    font-style: normal;
}

.cal-grid .wd {
    color: #8e8e93;
    font-size: 9px;
    font-weight: 600;
}

.cal-grid .we {
    color: #8e8e93;
}

.cal-grid .today {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-radius: 50%;
    background: #ff3b30;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.45);
}

.w-weather {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 13px 15px 11px;
    color: #fff;
    background: linear-gradient(180deg, rgba(90, 169, 255, 0.95), rgba(43, 111, 224, 0.95));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.w-weather.night {
    background: linear-gradient(180deg, rgba(36, 43, 82, 0.96), rgba(13, 18, 48, 0.96));
}

.w-weather.gray {
    background: linear-gradient(180deg, rgba(131, 147, 170, 0.96), rgba(74, 88, 109, 0.96));
}

.wx-top {
    display: flex;
    justify-content: space-between;
}

.wx-city {
    font-size: 13px;
    font-weight: 600;
}

.wx-temp {
    font-size: 44px;
    font-weight: 200;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.wx-r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: 12px;
    font-weight: 600;
}

.wx-r .wx-hl {
    font-weight: 500;
    opacity: 0.85;
}

.wx-hours {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}

.wx-hours span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wx-hours em {
    font-style: normal;
    font-weight: 500;
    opacity: 0.85;
}

.wx-msg {
    margin: auto;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
}

@media (max-width: 900px), (max-height: 560px) {
    .menubar-right > span {
        display: none;
    }
}

/* Short desktop window with a mouse: widgets stay tucked away, as before.
   Phones and tablets get them back through the compact desk below. */
@media (min-width: 901px) and (max-height: 560px) and (pointer: fine) {
    .widgets {
        display: none;
    }
}

/* ========== Desktop, small screens ========== */
@media (max-width: 720px) {
    .dock-inner {
        gap: 9px;
        padding: 8px 10px;
        border-radius: 26px;
    }
    .dock a,
    .dock button {
        width: 46px;
        height: 46px;
    }
    .dock .dk-glyph {
        width: 25px;
        height: 25px;
    }
    .dock .dk-trash {
        margin-left: 9px;
    }
    .dock .dk-trash::before {
        left: -10px;
    }
    .window-body {
        padding: 18px 20px 28px;
    }
    .titlebar h2,
    .titlebar .win-title {
        padding: 0 84px;
    }
    .window-body h3 {
        font-size: 23px;
    }
    .article-page {
        padding: 18px 20px 28px;
    }
    .country-select {
        max-width: 108px;
        font-size: 13px;
        padding: 11px 6px 11px 10px;
    }
    .submit-btn {
        width: 100%;
        justify-content: center;
    }
}

.country-select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ========== Menu bar logo ==========
   The site's own logo mark (/images/brand/mir-ahadul-islam-logo-mark.svg), drawn
   through a CSS mask so no new image file is needed, filled with a gradient
   lifted from the wallpaper ribbons (cyan, violet, magenta) so it pops. */
.menubar .logo-mark {
    display: inline-block;
    flex: none;
    width: 30px;
    aspect-ratio: 775 / 674;
    background: linear-gradient(135deg, #5df2ff 0%, #8b8bff 46%, #ff5ad9 100%);
    -webkit-mask: url(/images/brand/mir-ahadul-islam-logo-mark.svg) center / contain no-repeat;
    mask: url(/images/brand/mir-ahadul-islam-logo-mark.svg) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(105, 200, 255, 0.55)) drop-shadow(0 0 14px rgba(255, 90, 217, 0.28));
}

/* ========== Phones: menu bar ==========
   Everything stays reachable: the folder links scroll sideways inside their own
   strip (with a soft fade on the right edge) while the sound button and the
   clock are pinned on the right and can never be cut off. */
.menubar-right {
    flex: none;
}

@media (max-width: 720px) {
    .menubar {
        padding: 0 8px;
    }
    .menubar-left {
        flex: 1 1 auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .menubar-left::-webkit-scrollbar {
        display: none;
    }
    .menubar-right {
        margin-left: 6px;
    }
    .menubar a,
    .menubar button.menu-item {
        flex: none;
        padding: 0 8px;
    }
    .menubar .brand-mark {
        padding: 0 8px 0 4px;
    }
    .menubar-right > span,
    .menu-clock {
        padding: 0 6px;
    }
}

/* the fade only where the links can actually overflow */
@media (max-width: 600px) {
    .menubar-left {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    }
}

/* very narrow: the date goes, the time stays (the Calendar widget shows the date) */
@media (max-width: 480px) {
    .menu-clock .mc-date {
        display: none;
    }
}

/* ========== Compact desk: phones, small tablets, narrow windows ==========
   On a large screen .desk-scroll has no box of its own (display: contents), so
   the desktop layout is exactly what it always was. On a small screen it becomes
   one tidy, scrollable surface: widgets on top, then the folders, with the Trash
   Bin as the last icon. Nothing is positioned on top of anything else, so
   nothing can be cut off, and if the screen is short you simply swipe. */
.desk-scroll {
    display: contents;
}

@media (max-width: 900px), ((max-height: 560px) and (pointer: coarse)) {
    .desk-scroll {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(3, 96px);
        justify-content: center;
        align-content: start;
        gap: 12px 8px;
        padding: 14px 12px 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .desk-scroll::-webkit-scrollbar {
        display: none;
    }
    .widgets {
        position: static;
        grid-column: 1 / -1;
        justify-self: center;
        zoom: 0.8;
        margin-bottom: 4px;
    }
    .icon-grid {
        display: contents;
    }
    .trash-slot {
        position: static;
    }
}

/* larger tablets / narrow desktop windows: widgets at full size, all six icons in a row */
@media (min-width: 700px) and (max-width: 900px) {
    .desk-scroll {
        grid-template-columns: repeat(6, 96px);
    }
    .widgets {
        zoom: 1;
    }
}

/* shorter phones: widgets a touch smaller so more of the folders show without scrolling */
@media (max-width: 699px) and (max-height: 700px) {
    .widgets {
        zoom: 0.72;
    }
}

/* the smallest phones (320px wide): slightly slimmer icon columns so three still fit */
@media (max-width: 345px) {
    .desk-scroll {
        grid-template-columns: repeat(3, 90px);
        gap: 12px 4px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .desk-icon {
        width: 90px;
    }
}

/* phones held sideways: folders on the left, widgets beside them */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
    .desk-scroll {
        grid-template-columns: repeat(3, 96px) auto;
        column-gap: 8px;
    }
    .widgets {
        grid-column: 4;
        grid-row: 1 / span 3;
        align-self: start;
        justify-self: start;
        zoom: 0.62;
        margin: 0 0 0 16px;
    }
}