/* =====================================================================
   SIRIN GUNKLOY — "desk" shell
   Left menu stays fixed in place; the right stage scrolls. Shared by the
   inner pages (thesis, fonts, maps, collaborators, about, contact) so they
   read like the archive home. The left .desk__nav is injected by
   js/components.js for any page with <body class="home-desk"> + a .desk.
   ===================================================================== */

body.home-desk {
  height: 100svh; overflow: hidden;
  background: var(--paper); color: var(--ink);
  --fg: var(--ink); --fg-dim: var(--muted); --hairline: var(--line-dark);
}
body.home-desk ::selection { background: var(--ink); color: var(--paper); }

.desk { display: grid; grid-template-columns: minmax(300px, 27vw) 1fr; height: 100svh; }

/* ---- Left navigation column ---- */
.desk__nav { display: flex; flex-direction: column; padding: clamp(1.5rem,3vh,2.6rem) clamp(1.4rem,2vw,2.4rem); border-right: 1px solid var(--line-dark); }
/* Logo mark — Thai name, two lines set tight (2026-09-20), in Lava Thin
   Italic at the menu's size (27-Aug feedback: name in Thai, Lava Thin Italic,
   same size as the Index menu). */
.desk__brand { display: block; font-family: var(--thai); font-weight: 200; font-style: italic; font-size: var(--fs-section); line-height: .92; letter-spacing: 0; }
.desk__menu { margin-top: auto; display: flex; flex-direction: column; gap: clamp(.1rem,.6vh,.4rem); }
.desk__menu a { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: 1.0; letter-spacing: -0.01em; color: var(--ink); transition: color .25s, padding-left .35s var(--ease); width: max-content; }
.desk__menu a:hover, .desk__menu a.is-current { font-style: italic; padding-left: .5rem; }
.desk__menu a .th { display: none; }
.desk__tools { margin-top: clamp(1.4rem,3vh,2.2rem); display: flex; align-items: center; gap: 1.1rem; }
.desk__tools .lang-toggle { display: flex; gap: .3rem; font-family: var(--grotesk); font-size: var(--fs-small); letter-spacing: .12em; }
.desk__tools .lang-toggle button { font-family: var(--grotesk); font-size: var(--fs-small); opacity: .4; }
.desk__tools .lang-toggle button[aria-pressed="true"] { opacity: 1; }
.desk__tools .lang-toggle span { opacity: .3; }

/* ---- Right stage: the scrollable content column ---- */
/* padding-bottom gives the last [data-reveal] element room to cross its
   ScrollTrigger 'top 88%' threshold before the scroller hits its max —
   otherwise a page ending right after a reveal element never animates in. */
.desk__stage { position: relative; overflow-y: auto; overflow-x: hidden; padding-bottom: clamp(4rem,14vh,9rem); }

/* Inner content pages drop into the stage: the big fixed-nav top padding is
   no longer needed, and the gutters can tighten for the narrower column. */
.desk__stage .page-hero { padding-top: clamp(2.4rem, 7vh, 5rem); }
.desk__stage .page-hero .idx { top: clamp(1.4rem, 4vh, 3rem); right: clamp(1.4rem, 4vw, 3.2rem); }
.desk__stage .shell { padding-inline: clamp(1.4rem, 4vw, 3.2rem); }

/* ---- Mobile floating menu button + full-screen overlay ----
   Hidden on desktop (the left nav is always visible there); shown ≤820px. */
.desk__fab, .desk__overlay { display: none; }

.desk__fab-bars { position: relative; display: inline-block; width: 17px; height: 2px; background: currentColor; }
.desk__fab-bars::before, .desk__fab-bars::after { content: ''; position: absolute; left: 0; width: 17px; height: 2px; background: currentColor; }
.desk__fab-bars::before { top: -5px; } .desk__fab-bars::after { top: 5px; }

.desk__overlay-inner { margin: auto; width: 100%; max-width: 30rem; min-height: 100%; padding: 1.6rem clamp(1.4rem,6vw,2.4rem) 2.4rem; display: flex; flex-direction: column; }
.desk__overlay-close { align-self: flex-end; font-family: var(--grotesk); font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.desk__overlay-menu { display: flex; flex-direction: column; gap: clamp(.2rem,1vh,.5rem); margin-top: auto; }
.desk__overlay-menu a { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); width: max-content; transition: padding-left .3s var(--ease); }
.desk__overlay-menu a.is-current { font-style: italic; color: var(--accent); }
.desk__overlay-menu a:active { padding-left: .4rem; }
.desk__overlay .lang-toggle { margin-top: auto; padding-top: 2rem; display: flex; gap: .35rem; font-family: var(--grotesk); font-size: var(--fs-small); letter-spacing: .12em; }
.desk__overlay .lang-toggle button { font-family: var(--grotesk); opacity: .4; }
.desk__overlay .lang-toggle button[aria-pressed="true"] { opacity: 1; }
.desk__overlay .lang-toggle span { opacity: .3; }

/* ---- Responsive: collapse to a single column, menu on top ---- */
@media (max-width: 820px){
  body.home-desk { height: auto; overflow: auto; }
  body.home-desk.desk-menu-open { overflow: hidden; }
  .desk { grid-template-columns: 1fr; height: auto; }
  .desk__nav { border-right: none; border-bottom: 1px solid var(--line-dark); }
  .desk__stage { overflow: visible; }

  .desk__fab {
    position: fixed; right: clamp(.9rem,4vw,1.4rem); bottom: clamp(.9rem,4vw,1.4rem); z-index: 60;
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .8rem 1.25rem; border-radius: 999px;
    background: var(--ink); color: var(--paper);
    font-family: var(--grotesk); font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 6px 22px rgba(0,0,0,.24); cursor: pointer;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .desk__fab:active { transform: scale(.95); }
  body.desk-menu-open .desk__fab { opacity: 0; pointer-events: none; transform: scale(.85); }

  .desk__overlay {
    position: fixed; inset: 0; z-index: 70; display: flex;
    background: var(--paper);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .desk__overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .desk__overlay-menu a { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .desk__overlay.is-open .desk__overlay-menu a { opacity: 1; transform: none; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(1){ transition-delay:.05s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(2){ transition-delay:.09s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(3){ transition-delay:.13s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(4){ transition-delay:.17s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(5){ transition-delay:.21s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(6){ transition-delay:.25s; }
  .desk__overlay.is-open .desk__overlay-menu a:nth-child(7){ transition-delay:.29s; }
}