:root{
    --bg:            #0e1a18;
    --ink:           #e9f1ee;
    --ink-soft:      #aebdb8;
    --ink-faint:     #6d827c;
    --accent:         #6fd8b8;
    --accent-soft:    #9ee9d0;
    --accent-dim:     #4f9885;
    --accent-cyan:    #6fd8e6;   
    --accent-cyan-dim:#4f9aaa;
    --hairline:      rgba(111,216,184,0.22);
    --hairline-faint:rgba(111,216,184,0.10);
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink-soft);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
  }
  a{ color:inherit; }
  ::selection{ background:rgba(111,216,184,0.26); color:#f1fbf7; }
  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:2px;
  }

  .scanlines{
    position:fixed; inset:0; pointer-events:none; z-index:50;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0)    0px,
      rgba(0,0,0,0)    2px,
      rgba(0,0,0,0.16) 3px,
      rgba(0,0,0,0)    4px
    );
    opacity:0.30;
  }

  .page{
    max-width:648px;
    margin:0 auto;
    padding:clamp(34px,7vw,62px) clamp(22px,6vw,40px) 0;
    position:relative;
    z-index:1;
  }

  /* theme toggle — pinned to the top-right of .page (NOT the viewport) */
  .datum{
    position:absolute;
    top:clamp(16px,3vw,28px);
    right:clamp(16px,3vw,28px);
    width:28px;
    height:28px;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--accent-cyan-dim);
    z-index:60;
    transition:color .18s ease;
  }
  .datum svg{
    width:28px;
    height:28px;
    overflow:visible;
  }
  .datum:hover,
  .datum:focus-visible{ color:var(--accent-cyan); }
  .datum .sun-icon{ display:block; }
  .datum .moon-icon{ display:none; }

  h1{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(2.1rem,5.6vw,2.95rem);
    line-height:1.08;
    letter-spacing:-0.015em;
    margin:0 0 20px;
    color:var(--ink);
  }
  .lead{
    position:relative;
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.22rem,2.7vw,1.52rem);
    line-height:1.4;
    color:var(--ink);
    margin:6px 0 0;
    padding:14px 14px;
  }
  .lead::before,
  .lead::after{
    content:"";
    position:absolute;
    width:12px; height:12px;
    pointer-events:none;
  }
  .lead::before{
    top:-4px; left:-4px;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
  }
  .lead::after{
    bottom:-4px; right:-4px;
    border-bottom:1px solid var(--accent);
    border-right:1px solid var(--accent);
  }

  .intro-top{
    display:flex;
    align-items:stretch;
    gap:28px;
    margin-bottom:28px;
  }
  .intro-text{
    flex:1;
    min-width:0;
  }
  .portrait{
    position:relative;
    flex-shrink:0;
    width:120px;
    background:#dde2cf;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .portrait-mask{
    width:100%;
    height:195px;
    background-color:#1d7565;
    -webkit-mask: url("portrait.png") 45% 8% / 200% no-repeat;
    mask: url("portrait.png") 45% 8% / 200% no-repeat;
  }
  .portrait::before,
  .portrait::after{
    content:"";
    position:absolute;
    width:12px; height:12px;
    pointer-events:none;
  }
  .portrait::before{
    top:-4px; left:-4px;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
  }
  .portrait::after{
    bottom:-4px; right:-4px;
    border-bottom:1px solid var(--accent);
    border-right:1px solid var(--accent);
  }

  p{ margin:0 0 21px; }
  .intro > p:last-child{ margin-bottom:0; }

  .block{
    margin-top:clamp(46px,8vw,72px);
    padding-top:clamp(38px,6vw,52px);
    border-top:1px solid var(--hairline-faint);
  }
  h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(1.42rem,3.4vw,1.8rem);
    line-height:1.16;
    letter-spacing:-0.01em;
    margin:0 0 28px;
    color:var(--ink);
  }
  strong{ font-weight:500; color:var(--ink); }

  .lnk{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid var(--hairline);
    transition:color .18s ease, border-color .18s ease;
  }
  .lnk:hover,
  .lnk:focus-visible{
    color:var(--accent-soft);
    border-bottom-color:var(--accent);
  }

  .things{ list-style:none; margin:0; padding:0; }
  .thing{
    position:relative;
    padding:22px 18px;
    border-top:1px solid var(--hairline-faint);
    transition:background .18s ease;
  }
  .thing:first-child{ border-top:0; }
  .thing-main{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:18px;
    align-items:baseline;
    text-decoration:none;
    color:inherit;
  }
  /* stretched-link overlay: whole card clickable, partner link sits above it */
  .thing-main::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
  }

  .thing::before,
  .thing::after{
    content:"";
    position:absolute;
    width:10px; height:10px;
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .thing::before{
    top:5px; left:5px;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
  }
  .thing::after{
    bottom:5px; right:5px;
    border-bottom:1px solid var(--accent);
    border-right:1px solid var(--accent);
  }
  .thing:hover::before,
  .thing:hover::after,
  .thing:focus-within::before,
  .thing:focus-within::after{ opacity:1; }
  .thing:hover{ background:rgba(111,216,184,0.025); }

  .thing-num{
    font-family:var(--mono);
    font-weight:400;
    font-size:1.7rem;
    line-height:1;
    color:var(--accent-dim);
    letter-spacing:0.02em;
    transition:color .18s ease;
  }
  .thing:hover .thing-num,
  .thing:focus-within .thing-num{ color:var(--accent); }

  .thing-body{ min-width:0; }
  .thing-title{
    font-family:var(--serif);
    font-weight:500;
    font-size:1.18rem;
    color:var(--ink);
    text-decoration:none;
    display:inline-flex;
    align-items:baseline;
    gap:8px;
    transition:color .18s ease;
  }
  .thing-title .arr{
    color:var(--accent-cyan);
    font-size:0.74em;
    transition:transform .18s ease;
  }
  .thing:hover .thing-title,
  .thing:focus-within .thing-title{ color:var(--accent); }
  .thing:hover .arr,
  .thing:focus-within .arr{ transform:translate(2px,-2px); }
  .thing-org{
    position:relative;
    z-index:2;
    margin:12px 0 0 78px;        /* line up with .thing-body (60px num + 18px gap) */
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.04em;
    color:var(--ink-faint);
    /* flex so the anchor knows its true remaining width and can ellipsis */
    display:flex;
    align-items:baseline;
    gap:0.5em;
    max-width:calc(100% - 78px);
    min-width:0;
  }
  .thing-date{ flex-shrink:0; color:var(--ink-faint); }
  .thing-org .sep{ flex-shrink:0; color:var(--ink-faint); }
  .thing-org a{
    flex:0 1 auto;        /* size to content; shrinkable to allow ellipsis */
    min-width:0;
    color:var(--accent-cyan);
    text-decoration:none;
    border-bottom:1px solid var(--hairline);
    padding-bottom:1px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:border-color .18s ease;
  }
  .thing-org a:hover,
  .thing-org a:focus-visible{ border-bottom-color:var(--accent-cyan); }
  .thing-desc{
    margin:7px 0 0;
    color:var(--ink-soft);
    font-size:0.98rem;
  }

  .elsewhere{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(28px,5vw,46px);
    padding:8px 0;
    margin:0;
  }
  .link-mark{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    color:var(--accent-cyan-dim);
    text-decoration:none;
    transition:color .18s ease;
  }
  .link-mark svg{
    width:30px;
    height:30px;
    overflow:visible;
  }
  .link-mark::before,
  .link-mark::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .link-mark::before{
    top:0; left:0;
    border-top:1px solid var(--accent-cyan);
    border-left:1px solid var(--accent-cyan);
  }
  .link-mark::after{
    bottom:0; right:0;
    border-bottom:1px solid var(--accent-cyan);
    border-right:1px solid var(--accent-cyan);
  }
  .link-mark:hover,
  .link-mark:focus-visible{ color:var(--accent-cyan); }
  .link-mark:hover::before,
  .link-mark:hover::after,
  .link-mark:focus-visible::before,
  .link-mark:focus-visible::after{ opacity:1; }

  footer{
    max-width:648px;
    margin:clamp(54px,9vw,82px) auto 0;
    padding:26px clamp(22px,6vw,40px) 42px;
    border-top:1px solid var(--hairline-faint);
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.04em;
    color:var(--ink-faint);
    position:relative; z-index:1;
  }
  footer a{
    color:var(--ink-faint);
    text-decoration:none;
    border-bottom:1px solid var(--hairline-faint);
    padding-bottom:2px;
    transition:color .18s ease, border-color .18s ease;
  }
  footer a:hover,
  footer a:focus-visible{
    color:var(--accent);
    border-color:var(--accent);
  }

  @media (max-width:520px){
    body{ font-size:16px; }
    footer{ flex-direction:column; gap:10px; }
    .thing{ padding:20px 14px; }
    .thing-main{ grid-template-columns:46px minmax(0,1fr); gap:14px; }
    .thing-org{ margin-left:60px; }     /* 46 + 14 */
    .thing-num{ font-size:1.45rem; }
    .link-mark{ width:46px; height:46px; }
    .link-mark svg{ width:26px; height:26px; }
    
    .intro-top{
      flex-direction:column;
      gap:18px;
      margin-bottom:24px;
    }
    .portrait{
      align-self:center;
      width:108px;
    }
    .portrait-mask{ height:137px; }
  }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *{ transition-duration:.001ms !important; }
  }

  @media (prefers-color-scheme:light){
    :root:not([data-theme]){
      --bg:             #f3f0e6;
      --ink:            #14201e;
      --ink-soft:       #4f5b56;
      --ink-faint:      #8a948e;
      --accent:         #1d7565;
      --accent-soft:    #2a8b78;
      --accent-dim:     #5fa395;
      --accent-cyan:    #1a6c83;
      --accent-cyan-dim:#5fa6b8;
      --hairline:       rgba(29,117,101,0.30);
      --hairline-faint: rgba(29,117,101,0.16);
    }
    :root:not([data-theme]) ::selection{
      background:rgba(29,117,101,0.18); color:var(--ink);
    }
    :root:not([data-theme]) .scanlines{ opacity:0.10; }
    :root:not([data-theme]) .datum .sun-icon{ display:none; }
    :root:not([data-theme]) .datum .moon-icon{ display:block; }
  }
  html[data-theme="light"]{
    --bg:             #f3f0e6;
    --ink:            #14201e;
    --ink-soft:       #4f5b56;
    --ink-faint:      #8a948e;
    --accent:         #1d7565;
    --accent-soft:    #2a8b78;
    --accent-dim:     #5fa395;
    --accent-cyan:    #1a6c83;
    --accent-cyan-dim:#5fa6b8;
    --hairline:       rgba(29,117,101,0.30);
    --hairline-faint: rgba(29,117,101,0.16);
  }
  html[data-theme="light"] ::selection{
    background:rgba(29,117,101,0.18); color:var(--ink);
  }
  html[data-theme="light"] .scanlines{ opacity:0.10; }
  html[data-theme="light"] .datum .sun-icon{ display:none; }
  html[data-theme="light"] .datum .moon-icon{ display:block; }