/* ─────────────────────────────────────────────
       DESIGN TOKENS
    ───────────────────────────────────────────── */
    :root {
      --bg          : #FCFCF5;
      --surface     : #F6F6EF;
      --border      : #E0E0D8;
      --border-hi   : #C4C4BC;
      --text        : #1a1a18;
      --text-mid    : #5c5c56;
      --text-dim    : #a8a89e;
      --btn-hover   : #F2F2EB;
      --btn-active  : #EAEAE3;
      --panel-bg    : #F8F8F2;
      --sheet-bg    : #FEFEF9;
      --overlay-bg  : rgba(20,20,16,0.30);
      --font-ui     : 'Helvetica Neue', -apple-system, sans-serif;
      --font-mono   : 'SFMono-Regular', monospace;
      --ease        : cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-theme="dark"] {
      --bg          : #10141D;
      --surface     : #161C28;
      --border      : #252D3E;
      --border-hi   : #3A4860;
      --text        : #C8D8EE;
      --text-mid    : #6A88AA;
      --text-dim    : #354A62;
      --btn-hover   : rgba(40,60,90,0.35);
      --btn-active  : rgba(50,75,110,0.50);
      --panel-bg    : #131A26;
      --sheet-bg    : #12182A;
      --overlay-bg  : rgba(4,8,18,0.72);
      --font-ui     : 'SFMono-Regular', monospace;
    }

    /* ─────────────────────────────────────────────
       BASE
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { font-size: 16px; -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--font-ui);
      background-color: var(--bg);
      color: var(--text);
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      overflow-x: hidden;
      transition: background-color 300ms var(--ease), color 300ms var(--ease);
      user-select: none;
      -webkit-user-select: none;
    }

    /* Cold-pressed paper grain — light only.
       SVG feTurbulence rendered to a 200×200 tile, tiled at low opacity.
       Mimics high-quality watercolour paper without any external asset. */
    [data-theme="light"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.038;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68 0.72' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px 200px;
    }

    /* Blueprint grid overlay — dark only */
    [data-theme="dark"] body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(rgba(100,160,220,0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,160,220,0.032) 1px, transparent 1px);
      background-size: 32px 32px;
    }

    /* ─────────────────────────────────────────────
       STAGE — main container
    ───────────────────────────────────────────── */
    .stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Top and bottom padding must exceed the tech-node height
         so floating annotations never reach the content */
      padding: 80px 40px 64px;
      z-index: 1;
    }

    /* Hairline stage border — dark mode only */
    [data-theme="dark"] .stage::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid var(--border);
      pointer-events: none;
    }

    /* Four corner ticks — dark only */
    [data-theme="dark"] .stage::after {
      content: '';
      position: absolute;
      inset: -1px;
      pointer-events: none;
      background:
        linear-gradient(var(--border-hi), var(--border-hi)) top    left  / 14px 1px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) top    left  / 1px 14px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) top    right / 14px 1px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) top    right / 1px 14px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) bottom left  / 14px 1px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) bottom left  / 1px 14px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--border-hi), var(--border-hi)) bottom right / 1px 14px no-repeat;
    }

    /* ─────────────────────────────────────────────
       TECHNICAL ANNOTATIONS — desktop only
       Pinned to stage corners, inside padding zone.
       On mobile these are hidden and replaced by
       .meta-strip inside the footer.
    ───────────────────────────────────────────── */
    .blueprint-node {
      position: fixed;
      font-family: var(--font-mono);
      font-size: 7px;
      line-height: 1.85;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      pointer-events: none;
      white-space: nowrap;
      opacity: 0.30;
      z-index: 2;
      transition: color 300ms var(--ease);
    }

    .node-tr { top: 24px; right: 24px; text-align: right; }
    .node-bl { bottom: 24px; left: 24px; }

    /* ─────────────────────────────────────────────
       MODE TOGGLE
    ───────────────────────────────────────────── */
    .mode-toggle {
      position: absolute;
      top: 18px;
      left: 18px;
      font-family: var(--font-mono);
      font-size: 7px;
      letter-spacing: 0.10em;
      color: var(--text-dim);
      background: none;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 4px 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: color 200ms, border-color 200ms, background 200ms;
      z-index: 10;
    }
    .mode-toggle:hover {
      color: var(--text-mid);
      border-color: var(--border-hi);
      background: var(--btn-hover);
    }

    /* ─────────────────────────────────────────────
       PORTRAIT
    ───────────────────────────────────────────── */
    .portrait {
      width: 124px;
      height: 124px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid var(--border-hi);
      margin-bottom: 28px;
      flex-shrink: 0;
      transition: border-color 300ms var(--ease);
    }

    .portrait img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center top;
      filter: grayscale(0.40) contrast(1.07) brightness(1.01);
      transition: filter 300ms var(--ease);
    }

    [data-theme="dark"] .portrait img {
      filter: grayscale(0.55) contrast(1.12) brightness(0.88) sepia(0.10);
    }

    /* ─────────────────────────────────────────────
       NAME & TAGLINE
    ───────────────────────────────────────────── */
    .name {
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 1.48rem;
      font-weight: 600;
      letter-spacing: -0.022em;
      line-height: 1.2;
      color: var(--text);
      text-align: center;
      margin-bottom: 10px;
      transition: color 300ms var(--ease);
    }

    .tagline {
      font-family: var(--font-mono);
      font-size: 0.64rem;
      font-weight: 400;
      letter-spacing: 0.10em;
      color: var(--text-dim);
      text-align: center;
      margin-bottom: 46px;
      transition: color 300ms var(--ease);
    }

    /* ─────────────────────────────────────────────
       BUTTON GRID — 3×2 desktop / 1×6 mobile
    ───────────────────────────────────────────── */
    .link-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      margin-bottom: 8px;
    }

    /* Ghost button — shared base */
    .ghost-btn {
      position: relative;
      display: grid;
      grid-template-columns: 34px 1fr 34px;
      align-items: center;
      min-height: 54px;
      padding: 0 2px;
      border: 1px solid #CACAC0;
      border-radius: 9px;
      background: transparent;
      text-decoration: none;
      font-family: var(--font-ui);
      font-size: 0.76rem;
      font-weight: 400;
      letter-spacing: -0.004em;
      color: var(--text-mid);
      cursor: pointer;
      overflow: hidden;
      transition:
        background    130ms var(--ease),
        border-color  130ms var(--ease),
        color         130ms var(--ease);
      -webkit-tap-highlight-color: transparent;
    }

    /* Pencil shading layer — fades in on hover */
    .ghost-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.035) 4px,
        rgba(0,0,0,0.035) 5px
      );
      opacity: 0;
      transition: opacity 160ms var(--ease);
      border-radius: inherit;
    }
    .ghost-btn:hover::after  { opacity: 1; }
    .ghost-btn:active::after { opacity: 0.5; }

    [data-theme="dark"] .ghost-btn { border-color: var(--border); }
    [data-theme="dark"] .ghost-btn::after {
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(100,160,220,0.04) 4px,
        rgba(100,160,220,0.04) 5px
      );
    }

    .ghost-btn:hover  {
      background: var(--btn-hover);
      border-color: var(--border-hi);
      color: var(--text);
    }
    .ghost-btn:active { background: var(--btn-active); }

    .ghost-btn .g-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ghost-btn .g-icon svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ghost-btn .g-label {
      text-align: center;
    }

    /* Full-width variant — contact button */
    .ghost-btn.full-width {
      grid-template-columns: 40px 1fr 40px;
      width: 100%;
    }

    /* Contact open state */
    .ghost-btn.full-width.is-open {
      border-radius: 9px 9px 0 0;
      border-bottom-color: var(--surface);
      background: var(--surface);
      color: var(--text);
    }

    .g-caret {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      color: var(--text-dim);
      transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), color 130ms;
    }
    .ghost-btn.is-open .g-caret { transform: rotate(180deg); }

    /* ─────────────────────────────────────────────
       CONTACT ACCORDION PANEL
    ───────────────────────────────────────────── */
    .contact-accordion {
      width: 100%;
      height: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-top: none;
      border-radius: 0 0 9px 9px;
      background: var(--panel-bg);
      transition: height 360ms cubic-bezier(0.16, 1, 0.3, 1);
      will-change: height;
    }

    .channel-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 18px;
      text-decoration: none;
      color: var(--text-mid);
      font-size: 0.78rem;
      border-top: 1px solid var(--border);
      transition: background 110ms, color 110ms;
    }
    .channel-row:first-child { border-top: none; }
    .channel-row:hover { background: var(--btn-hover); color: var(--text); }

    .ch-type {
      font-family: var(--font-mono);
      font-size: 0.60rem;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      flex-shrink: 0;
      width: 48px;
      text-transform: uppercase;
    }

    /* ─────────────────────────────────────────────
       DIVIDER + FOOTER
    ───────────────────────────────────────────── */
    .rule {
      width: 100%;
      height: 1px;
      background: var(--border);
      margin: 26px 0 18px;
      flex-shrink: 0;
    }

    .site-footer {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .footer-legal {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-family: var(--font-mono);
      font-size: 0.60rem;
      letter-spacing: 0.06em;
      color: var(--text-dim);
    }

    .footer-sep { color: var(--border-hi); pointer-events: none; }

    .footer-legal button,
    .footer-legal a {
      color: inherit;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      padding: 0;
      text-decoration: none;
      transition: color 110ms;
    }
    .footer-legal button:hover,
    .footer-legal a:hover { color: var(--text-mid); }

    /* Mobile metadata strip — hidden on desktop */
    .meta-strip {
      display: none;
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      text-align: center;
      line-height: 1.9;
    }

    /* ─────────────────────────────────────────────
       MODALS
    ───────────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 300;
      opacity: 0;
      visibility: hidden;
      transition: opacity 220ms var(--ease), visibility 220ms;
    }
    .modal-overlay.is-open { opacity: 1; visibility: visible; }

    .modal-sheet {
      background: var(--sheet-bg);
      width: 100%;
      max-width: 580px;
      max-height: 84dvh;
      border-radius: 16px 16px 0 0;
      border: 1px solid var(--border);
      border-bottom: none;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 260ms var(--ease);
      overflow: hidden;
    }
    .modal-overlay.is-open .modal-sheet { transform: translateY(0); }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 22px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .modal-title {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.10em;
      color: var(--text);
    }

    .modal-close-btn {
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: none;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.60rem;
      letter-spacing: 0.10em;
      color: var(--text-mid);
      transition: background 110ms, border-color 110ms, color 110ms;
    }
    .modal-close-btn:hover {
      background: var(--btn-hover);
      border-color: var(--border-hi);
      color: var(--text);
    }

    .modal-body {
      overflow-y: auto;
      padding: 22px;
      flex: 1;
      overscroll-behavior: contain;
    }

    .modal-body h2 {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.10em;
      color: var(--text-mid);
      text-transform: uppercase;
      margin: 22px 0 9px;
    }
    .modal-body h2:first-child { margin-top: 0; }

    .modal-body p {
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 0.81rem;
      line-height: 1.76;
      color: var(--text-mid);
      margin-bottom: 4px;
    }

    .modal-body ul {
      padding-left: 18px;
      margin: 6px 0 12px;
    }

    .modal-body li {
      font-family: 'Helvetica Neue', sans-serif;
      font-size: 0.81rem;
      line-height: 1.76;
      color: var(--text-mid);
      margin: 4px 0;
    }

    .modal-body a { color: var(--text); }

    .modal-date {
      display: block;
      margin-top: 22px;
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      color: var(--text-dim);
    }

    .modal-body::-webkit-scrollbar { width: 3px; }
    .modal-body::-webkit-scrollbar-track { background: transparent; }
    .modal-body::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

    /* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
    @media (max-width: 500px) {
      body { padding: 0 14px; }

      .stage {
        /* Remove top/bottom padding reserved for absolute nodes */
        padding: 44px 0 40px;
      }

      /* Hide all floating annotations */
      .blueprint-node { display: none !important; }

      /* Hide mode toggle's absolute positioning — bring into flow */
      .mode-toggle {
        position: static;
        margin-bottom: 24px;
      }

      /* Single-column links */
      .link-grid {
        grid-template-columns: 1fr;
      }

      .ghost-btn {
        grid-template-columns: 48px 1fr 48px;
        min-height: 58px;
      }

      /* Show mobile meta strip */
      .meta-strip { display: block; }
    }

    @media (min-width: 501px) {
      .modal-overlay { align-items: center; padding: 24px; }
      .modal-sheet {
        align-self: center;
        border-radius: 14px;
        border-bottom: 1px solid var(--border);
        max-height: 80dvh;
      }
    }

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

    /* Refined layout: retain paper and blueprint identities. */
    :root { --text-dim: #73736a; }
    [data-theme="dark"] { --text-dim: #8096b1; --text-mid: #9bafc9; }
    body { user-select: text; -webkit-user-select: text; padding: 28px 24px; }
    .stage { max-width: 540px; padding: 76px 36px 36px; }
    .portrait { position: relative; display: grid; place-items: center; background: var(--surface); margin-bottom: 24px; }
    .portrait-fallback { position: absolute; font-family: var(--font-mono); font-size: 34px; letter-spacing: -.08em; color: var(--text-mid); }
    .portrait img { position: relative; z-index: 1; }
    .portrait img[hidden] { display: none; }
    .name { font-size: clamp(1.4rem, 5vw, 1.65rem); }
    .tagline { font-size: .69rem; margin-bottom: 20px; }
    .intro { font-family: 'Helvetica Neue', sans-serif; font-size: .88rem; line-height: 1.8; text-align: center; color: var(--text-mid); margin-bottom: 32px; }
    .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
    .ghost-btn { grid-template-columns: 36px minmax(0, 1fr) 20px; min-height: 56px; padding: 0 8px; font-size: .81rem; }
    .ghost-btn[target="_blank"] > span:last-child::after { content: '↗'; font-size: 12px; color: var(--text-dim); }
    .mode-toggle { min-height: 32px; font-size: 9px; padding: 6px 10px; }
    .blueprint-node { font-size: 9px; opacity: .65; }
    .footer-legal { font-size: .66rem; flex-wrap: wrap; gap: 8px 12px; }
    .footer-legal button, .footer-legal a { min-height: 32px; display: inline-flex; align-items: center; }
    .site-footer + .site-footer { margin-top: 8px; }
    .ch-type { font-size: .64rem; width: 52px; }
    .channel-row { font-size: .81rem; overflow-wrap: anywhere; }
    .modal-close-btn { min-height: 36px; font-size: .7rem; }
    .modal-title { font-size: .74rem; }
    .modal-body p, .modal-body li { font-size: .9rem; }
    .modal-body { user-select: text; -webkit-user-select: text; }
    @media (max-width: 500px) {
      body { padding: 18px 20px; }
      .stage { padding: 16px 0 24px; }
      .mode-toggle { align-self: flex-end; margin-bottom: 28px; }
      .portrait { width: 112px; height: 112px; }
      .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .meta-strip { margin-top: 16px; font-size: .58rem; }
    }
    @media (max-width: 350px) {
      .link-grid { grid-template-columns: 1fr; }
      .channel-row { padding: 13px 10px; gap: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    }

    .portrait { width: 180px; height: 180px; border-radius: 28px; box-shadow: 0 8px 28px rgba(0,0,0,.10); }
    .portrait img { object-position: center center; filter: none; }
    [data-theme="dark"] .portrait img { filter: none; }
    .utility-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin-top: 14px; color: var(--text-dim); }
    .utility-actions button, .utility-actions a { background: none; border: none; color: var(--text-mid); font: 11px var(--font-ui); cursor: pointer; text-decoration: none; padding: 10px 2px; }
    .utility-actions button:hover, .utility-actions a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
    .rule { margin-top: 14px; }
    @media (max-width: 500px) { .portrait { width: 164px; height: 164px; border-radius: 25px; } }

    /* Blueprint refinement — drafting lines, measured spacing, restrained ink. */
    :root { --accent: #4a657d; --drawing-line: rgba(74,101,125,.10); }
    [data-theme="dark"] { --accent: #94b9db; --drawing-line: rgba(148,185,219,.10); }
    .stage { padding: 76px 36px 32px; border: 1px solid var(--border); border-radius: 0; }
    .stage::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--drawing-line); pointer-events: none; }
    [data-theme="dark"] .stage::before { inset: 7px; border-color: var(--drawing-line); }
    .stage::after, [data-theme="dark"] .stage::after { content: ''; position: absolute; inset: -1px; pointer-events: none; background:
      linear-gradient(var(--accent),var(--accent)) top left / 18px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) top left / 1px 18px no-repeat,
      linear-gradient(var(--accent),var(--accent)) top right / 18px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) top right / 1px 18px no-repeat,
      linear-gradient(var(--accent),var(--accent)) bottom left / 18px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) bottom left / 1px 18px no-repeat,
      linear-gradient(var(--accent),var(--accent)) bottom right / 18px 1px no-repeat,
      linear-gradient(var(--accent),var(--accent)) bottom right / 1px 18px no-repeat; }
    .portrait { overflow: visible; border-radius: 3px; box-shadow: none; outline: 1px solid var(--border); outline-offset: 5px; border-color: var(--border-hi); margin-bottom: 30px; }
    .portrait img { border-radius: 2px; }
    .portrait::before, .portrait::after { position: absolute; font: 8px var(--font-mono); letter-spacing: .12em; color: var(--text-dim); pointer-events: none; }
    .portrait::before { content: '+'; left: -13px; top: -17px; font-size: 16px; color: var(--accent); }
    .portrait::after { content: 'FIG. 01 / PORTRE'; bottom: -23px; left: 0; right: 0; text-align: center; }
    .name { margin-top: 10px; font-size: clamp(1.4rem,5vw,1.65rem); }
    .tagline { font-size: .64rem; letter-spacing: .14em; margin-bottom: 22px; }
    .intro { position: relative; font-family: var(--font-mono); font-size: .8rem; line-height: 1.8; color: var(--text-mid); margin-bottom: 30px; padding: 0 18px; }
    .intro::before, .intro::after { position: absolute; top: 0; color: var(--accent); opacity: .65; }
    .intro::before { content: '['; left: 0; }
    .intro::after { content: ']'; right: 0; }
    .link-grid { counter-reset: channel; position: relative; padding-top: 22px; gap: 8px; }
    .link-grid::before { content: '01 — SOSYAL KANALLAR'; position: absolute; top: 0; left: 0; font: 9px var(--font-mono); letter-spacing: .12em; color: var(--text-dim); }
    .ghost-btn { border-radius: 3px; font-family: var(--font-mono); font-size: .74rem; transition: background 160ms, border-color 160ms, color 160ms; }
    .ghost-btn:hover { border-color: var(--accent); }
    .ghost-btn .g-icon { color: var(--accent); }
    .ghost-btn .g-icon svg { transition: transform 160ms var(--ease); }
    .ghost-btn:hover .g-icon svg { transform: translateY(-1px); }
    .ghost-btn[target="_blank"] > span:last-child::after { display: inline-block; transition: transform 160ms var(--ease); }
    .ghost-btn[target="_blank"]:hover > span:last-child::after { transform: translate(2px,-2px); color: var(--accent); }
    .ghost-btn.full-width { margin-top: 4px; }
    .ghost-btn.full-width.is-open { border-radius: 3px 3px 0 0; }
    .contact-accordion { border-radius: 0 0 3px 3px; }
    .rule { position: relative; margin-bottom: 18px; }
    .rule::before, .rule::after { content: ''; position: absolute; width: 1px; height: 5px; top: -2px; background: var(--border-hi); }
    .rule::before { left: 0; } .rule::after { right: 0; }
    .mode-toggle { border-radius: 2px; top: 18px; left: 18px; }
    .utility-actions a { font-family: var(--font-mono); font-size: 10px; }
    .meta-strip { display: block; margin-top: 18px; font-size: 8px; letter-spacing: .10em; }
    .footer-legal { font-size: .62rem; }
    @media (max-width: 500px) {
      body { padding: 20px 16px; }
      .stage { padding: 18px 20px 24px; }
      .mode-toggle { align-self: flex-start; margin-bottom: 30px; }
      .portrait { border-radius: 3px; }
      .ghost-btn { padding: 0 4px; grid-template-columns: 28px minmax(0,1fr) 16px; font-size: .68rem; }
      .intro { font-size: .73rem; }
      .meta-strip { font-size: 7px; }
    }

    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
  
.portrait { padding: 0; cursor: zoom-in; font: inherit; color: inherit; }
.portrait:hover { outline-color: var(--accent); }
#portrait-dialog { padding: 0; border: 1px solid var(--border-hi); background: var(--bg); color: var(--text); margin: auto; max-width: min(90vw, 800px); max-height: 90dvh; overflow: auto; }
#portrait-dialog::backdrop { background: rgba(4,8,18,.88); }
#portrait-dialog img { display: block; width: 100%; height: auto; max-height: 80dvh; object-fit: contain; }
#portrait-close { display: block; margin-left: auto; min-height: 44px; padding: 10px 18px; border: none; background: transparent; color: inherit; font: 11px var(--font-mono); cursor: pointer; }

/* Mobile layout: flexible tracks, safe areas and accessible touch targets. */
html { overflow-wrap: break-word; }
body { padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.stage { min-width: 0; }
.name { max-width: 100%; text-wrap: balance; margin-bottom: 18px; }
.link-grid { min-width: 0; }
.ghost-btn .g-label { min-width: 0; }
.channel-row { min-width: 0; overflow-wrap: anywhere; }
.mode-toggle, .modal-close-btn, .footer-legal button, .footer-legal a, .utility-actions a { min-height: 44px; }
.utility-actions a { display: inline-flex; align-items: center; }
.modal-sheet { min-width: 0; }
.modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#portrait-dialog { width: min(92vw, 800px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
#portrait-dialog img { max-height: calc(100dvh - 100px); }
@media (max-width: 500px) {
  body { align-items: flex-start; }
  .stage { width: 100%; max-width: 440px; padding: 14px 18px 20px; margin: auto; }
  .mode-toggle { margin-bottom: 24px; padding: 8px 10px; font-size: 10px; }
  .portrait { width: clamp(136px, 42vw, 172px); height: clamp(136px, 42vw, 172px); }
  .name { font-size: clamp(1.25rem, 5.4vw, 1.6rem); line-height: 1.35; margin-top: 12px; margin-bottom: 14px; }
  .intro { font-size: clamp(.70rem, 3vw, .8rem); margin-bottom: 24px; }
  .link-grid { gap: 8px; }
  .ghost-btn { min-height: 56px; grid-template-columns: 24px minmax(0, 1fr) 14px; padding: 0 5px; font-size: clamp(.65rem, 2.75vw, .78rem); }
  .ghost-btn.full-width { grid-template-columns: 30px minmax(0, 1fr) 24px; }
  .channel-row { gap: 8px; padding: 14px 10px; font-size: .8rem; line-height: 1.6; }
  .ch-type { width: 46px; font-size: .6rem; }
  .footer-legal { gap: 0 10px; font-size: .64rem; }
  .site-footer + .site-footer { margin-top: 0; }
  .modal-overlay { padding: 0; }
  .modal-sheet { width: 100%; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom); }
  .modal-header { padding: 12px 16px; gap: 12px; }
  .modal-title { font-size: .68rem; line-height: 1.6; }
  .modal-body { padding: 18px 20px; }
  .modal-body p, .modal-body li { font-size: .92rem; line-height: 1.8; }
}
@media (max-width: 359px) {
  .stage { padding-left: 14px; padding-right: 14px; }
  .link-grid { grid-template-columns: 1fr; }
  .ghost-btn { font-size: .8rem; grid-template-columns: 36px minmax(0, 1fr) 24px; }
  .channel-row { flex-wrap: wrap; gap: 2px 8px; }
  .ch-type { width: 100%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  body { align-items: flex-start; }
  .stage { margin-block: 12px; }
  #portrait-dialog img { max-height: calc(100dvh - 90px); }
}
@media (pointer: coarse) {
  .ghost-btn:hover .g-icon svg, .ghost-btn[target="_blank"]:hover > span:last-child::after { transform: none; }
}