/* Ösel Translation · oseltranslation.com */
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/alegreya-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/alegreya-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/alegreya-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/alegreya-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/alegreya-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/alegreya-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-latin-ext-500-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-sans-sc-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/alegreya-sans-sc-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/alegreya-sans-sc-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Alegreya Sans SC'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/alegreya-sans-sc-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jomolhari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jomolhari-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jomolhari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jomolhari-tibetan-400-normal.woff2) format('woff2'); unicode-range: U+0F00-0FFF,U+200C-200D,U+25CC,U+3008-300B; }

  /* Layout: one reading column. Each translation is set as a pecha folio:
     a long leaf with a double-ruled frame and a left margin carrying the folio
     number in Tibetan numerals. Light theme = natural daphne paper, black ink,
     cinnabar rubrics. Dark theme = indigo "mthing shog" paper with gold ink. */
  :root {
    --desk: #E3DAC5;
    --leaf: #F1EBDE;
    --ink: #1F1B15;
    --ink-soft: #5D5444;
    --rule: #BCAF95;
    --accent: #A3271C;
    --on-accent: #F7F0E3;
    --shadow: rgba(74, 52, 26, .32);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --f-text: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --f-label: "Alegreya Sans SC", "Gill Sans", "Trebuchet MS", sans-serif;
    --f-tib: "Jomolhari", "Noto Serif Tibetan", "Microsoft Himalaya", "Kailasa", serif;

    --t-label: .8125rem;
    --t-body: 1.0625rem;
    --t-title: 1.5rem;
    --t-hero: clamp(2.1rem, 1.35rem + 3.2vw, 3.35rem);
    --measure: 44rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --desk: #0E1322;
      --leaf: #151D33;
      --ink: #EADFC3;
      --ink-soft: #A99D82;
      --rule: #5E5233;
      --accent: #D2AE5F;
      --on-accent: #121827;
      --shadow: rgba(0, 0, 0, .65);
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .75 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --desk: #0E1322;
    --leaf: #151D33;
    --ink: #EADFC3;
    --ink-soft: #A99D82;
    --rule: #5E5233;
    --accent: #D2AE5F;
    --on-accent: #121827;
    --shadow: rgba(0, 0, 0, .65);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .75 0 0 0 0 .6 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }

  [hidden] { display: none !important; }

  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--desk) var(--grain);
    color: var(--ink);
    font: 400 var(--t-body)/1.6 var(--f-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  .wrap {
    max-width: calc(var(--measure) + 2 * 16px);
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 0 4rem;
  }

  .label {
    font-family: var(--f-label);
    font-weight: 500;
    font-size: var(--t-label);
    letter-spacing: .08em;
    color: var(--ink-soft);
  }


  /* Header */
  .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 1.5rem 0;
  }
  .name { display: grid; gap: .1rem; min-width: 0; }
  .name strong {
    font-weight: 500;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: .005em;
  }
  .controls { display: flex; align-items: center; gap: .75rem; }
  .lang { display: flex; gap: .15rem; }
  .lang a, .theme {
    appearance: none;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font: 700 var(--t-label)/1 var(--f-label);
    letter-spacing: .12em;
    padding: .55rem .5rem;
    cursor: pointer;
    position: relative;
    transition: color .25s;
  }
  .lang a::after {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: .25rem;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .35s var(--ease);
  }
  .lang a[aria-current="page"] { color: var(--ink); }
  .lang a[aria-current="page"]::after { transform: scaleX(1); }
  .lang a:hover, .theme:hover { color: var(--ink); }
  .theme { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; }
  .lang a { display: inline-block; text-decoration: none; }
  .name a { color: inherit; text-decoration: none; }
  .theme svg { width: 1rem; height: 1rem; }

  /* Hero */
  .hero { padding-block: clamp(2.75rem, 7vw, 4.75rem) 2.5rem; display: grid; gap: 1rem; }
  .headmark {
    margin: 0;
    font-family: var(--f-tib);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent);
  }
  .hero h1 {
    margin: 0;
    font-weight: 500;
    font-size: var(--t-hero);
    line-height: 1.06;
    letter-spacing: -.012em;
    text-wrap: balance;
    max-width: 18ch;
  }
  .double-rule {
    display: block;
    height: 4px;
    margin-top: 1.25rem;
    border-block: 1px solid var(--rule);
    transform-origin: left center;
  }

  /* Sections */
  section { padding-block: 2.25rem 0; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
  .section-head h2 { margin: 0; font: inherit; }
  .prose { display: grid; gap: 1rem; }
  .prose p { margin: 0; text-wrap: pretty; }
  .prose p, .prose li, .folio p.desc {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }

  /* Folios */
  .folios { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
  .folio {
    --i: 0;
    background: var(--leaf);
    padding: .5rem;
    border: 1px solid var(--rule);
    box-shadow: 0 1px 0 var(--rule), 0 18px 30px -26px var(--shadow);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .folio:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--rule), 0 26px 38px -24px var(--shadow); }
  .folio-frame {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    border: 3px double var(--rule);
    transition: border-color .45s var(--ease);
  }
  .folio:hover .folio-frame { border-color: var(--accent); }
  .folio-margin {
    display: grid;
    place-items: center;
    border-right: 3px double var(--rule);
    font-family: var(--f-tib);
    font-size: 1.6rem;
    color: var(--accent);
    transition: border-color .45s var(--ease);
  }
  .folio:hover .folio-margin { border-color: var(--accent); }
  .folio-body { display: grid; gap: .55rem; padding: 1.25rem 1.5rem 1.15rem; min-width: 0; }
  .tib { margin: 0; font-family: var(--f-tib); font-size: 1.35rem; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
  .tib .mark { color: var(--accent); margin-right: .35em; }
  .folio h3 { margin: 0; font-weight: 500; font-size: var(--t-title); line-height: 1.2; text-wrap: balance; }
  .folio p.desc { margin: 0; text-wrap: pretty; }
  .folio-foot {
    display: flex;
    align-items: center;
    margin-top: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--rule);
  }
  .folio--soon .folio-body { padding-block: 1.6rem; }
  .folio--soon h3 { font-style: italic; color: var(--ink-soft); }

  .download {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font: 700 var(--t-label)/1 var(--f-label);
    letter-spacing: .1em;
    color: var(--accent);
    padding-block: .35rem;
  }
  .download .arrow {
    display: grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--f-text);
    font-size: 1rem;
    transition: transform .35s var(--ease), background-color .35s, color .35s;
  }
  .download:hover .arrow { transform: translateY(3px); background: var(--accent); color: var(--on-accent); }

  /* Support */
  .support-intro { margin-bottom: 1.25rem; }
  .give { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .slip {
    display: grid;
    gap: .3rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--rule);
    background: var(--leaf);
    text-decoration: none;
    transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease);
  }
  .slip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 16px 28px -24px var(--shadow); }
  .slip-title { font-size: 1.2rem; font-weight: 500; line-height: 1.25; }
  .slip-title::after { content: " →"; color: var(--accent); }
  .slip--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .slip--primary .label, .slip--primary .slip-title::after { color: var(--on-accent); }
  .slip--primary .label { opacity: .85; }
  .give-note { margin: 1rem 0 0; color: var(--ink-soft); font-style: italic; }

  /* Commissions */
  .email-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.1rem; }
  .email { font-size: 1.2rem; font-style: italic; overflow-wrap: anywhere; }
  .copy {
    appearance: none;
    border: 1px solid var(--rule);
    background: none;
    border-radius: 999px;
    padding: .45rem .9rem;
    color: var(--ink);
    font: 700 var(--t-label)/1 var(--f-label);
    letter-spacing: .1em;
    cursor: pointer;
    transition: border-color .3s;
  }
  .copy:hover { border-color: var(--accent); }

  /* Copyright */
  .rights {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 3px double var(--rule);
    color: var(--ink-soft);
    font-size: .975rem;
  }
  .rights .section-head { margin-bottom: 1rem; }
  .rights ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .3rem; }
  .rights li::marker { color: var(--accent); }
  .rights a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
  .rights a:hover { text-decoration-color: var(--accent); }
  .rights strong { color: var(--ink); font-weight: 500; }

  /* Privacy note: folded at the foot of the page */
  .privacy { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .privacy summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    font: 700 var(--t-label)/1.2 var(--f-label);
    letter-spacing: .1em;
    padding-block: .3rem;
  }
  .privacy summary::-webkit-details-marker { display: none; }
  .privacy summary::after { content: "+"; font-family: var(--f-text); font-size: 1.1rem; line-height: 1; transition: transform .35s var(--ease); }
  .privacy[open] summary::after { transform: rotate(45deg); }
  .privacy-body { display: grid; gap: 1rem; padding-top: 1rem; }
  .privacy-body h3 { margin: 0 0 -.6rem; font: 700 var(--t-label)/1.3 var(--f-label); letter-spacing: .08em; color: var(--ink); }
  .privacy-body p { margin: 0; }
  .privacy-body .updated { font-style: italic; }
  @media (prefers-reduced-motion: no-preference) {
    .privacy[open] .privacy-body { animation: rise .5s var(--ease) both; }
  }

  /* Narrow screens */
  @media (max-width: 34rem) {
    .give { grid-template-columns: minmax(0, 1fr); }
    .folio-frame { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .folio-margin { font-size: 1.3rem; }
    .folio-body { padding: 1rem 1rem .95rem; }
    .headmark { font-size: 2.1rem; }
  }

  /* Opening sequence: the head mark soaks in like ink, the rule draws, the leaves settle. */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.settled) .headmark { animation: ink 1.4s var(--ease) both; }
    html:not(.settled) .hero h1 { animation: rise .9s .15s var(--ease) both; }
    html:not(.settled) .double-rule { animation: draw 1.1s .35s var(--ease) both; }
    html:not(.settled) .folio { animation: leaf .85s var(--ease) both; animation-delay: calc(.5s + var(--i) * .13s); }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
  }
  @keyframes ink { from { opacity: 0; filter: blur(8px); transform: scale(1.06); } to { opacity: 1; filter: none; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes leaf { from { opacity: 0; transform: translateY(16px); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  }