/* Where This Life Goes - styles */
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pinyon.woff2) format('woff2');}
@font-face{font-family:'Italianno';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/italianno.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-400-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-400-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-500-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-500-italic.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-600-normal.woff2) format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-600-italic.woff2) format('woff2');}

:root{
    color-scheme:dark;
    --deep:#22414b; --ink:#f7f3ea; --ink-2:rgba(247,243,234,.8); --ink-3:rgba(247,243,234,.6);
    --glass:rgba(247,243,234,.13); --glass-line:rgba(247,243,234,.34);
    --pink:#eba2ba; --gold:#f1d27a;
    --card:#f6f2e9; --card-2:#e8e3d6; --card-ink:#233740; --card-ink-2:#5b6d72; --accent:#5f7fa3;
    /* Latin is Pinyon; the Chinese fallbacks are the nearest pens to it that a
       machine is likely to have, so a Chinese line still reads as the same hand */
    --display:'Pinyon Script','Snell Roundhand','Apple Chancery','STXingkai','Kaiti SC','STKaiti','HanziPen SC','Noto Serif SC',cursive;
    --hand:'Italianno','Pinyon Script','Snell Roundhand',cursive;
    --body:'Cormorant Garamond','Noto Serif SC','Songti SC',Georgia,serif;
    --latin:'Cormorant Garamond','Noto Serif SC','Songti SC',Georgia,serif;
  }
  [hidden]{display:none!important;}
  html{background:var(--deep);}
  body{background:linear-gradient(rgba(24,44,54,.18),rgba(24,44,54,.18)),url('img/pond.jpg') center center/cover fixed,var(--deep);color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.75; min-height:100%; transition:opacity .45s ease;}
  html.ready body{opacity:1;}
  #pond-bg{position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; opacity:0;}
  .veil{position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(120% 80% at 50% 0%, rgba(20,40,48,.35), transparent 60%), linear-gradient(to bottom, transparent 70%, rgba(20,38,48,.35));}
  .wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding-inline:16px; padding-block:56px 64px; display:flex; flex-direction:column; gap:34px;}

  .hero{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;}
  .eyebrow{margin:0; font-family:var(--latin); font-style:italic; font-size:18px; letter-spacing:.08em; color:var(--ink-2);}
  h1{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(58px,11vw,128px); line-height:1.08; letter-spacing:0;
     text-shadow:0 2px 30px rgba(14,34,44,.5); text-wrap:balance;}
  .poem{margin:18px 0 0; text-shadow:0 1px 16px rgba(14,34,44,.65);}
  .poem .en{display:flex; flex-direction:column; font-family:var(--hand); font-size:clamp(24px,2.9vw,33px); line-height:1.2; color:var(--ink); text-wrap:balance;}
  .poem .en span:nth-child(4n){margin-bottom:.45em;}
  .poem .en span:nth-last-child(-n+2){padding-left:1.4em;}
  /* Chinese, set in the very same hand as the heading above it */
  .poem .cn{display:flex; flex-direction:column; font-family:var(--display);
            font-size:clamp(21px,2.5vw,30px); font-weight:400; line-height:1.8; letter-spacing:.03em;
            color:var(--ink); text-shadow:0 2px 30px rgba(14,34,44,.5);}
  .poem .cn span:nth-child(4),.poem .cn span:nth-child(8){margin-bottom:.5em;}
  .poem .by{margin:16px 0 0; font-family:var(--display); font-size:clamp(17px,1.6vw,21px); letter-spacing:.06em; color:var(--ink-2);}
  .actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px;}
  .btn{
    font:inherit; font-size:14.5px; cursor:pointer; padding:9px 20px; border-radius:999px;
    color:var(--ink); background:var(--glass); border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .2s ease;
  }
  .btn:hover{background:rgba(247,243,234,.22);}
  .btn.primary{background:var(--ink); color:var(--card-ink); border-color:var(--ink);}
  .btn.primary:hover{background:#fffaf0;}
  .btn:disabled{opacity:.5; cursor:default;}
  .btn:focus-visible,.pad:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

  .orn{position:absolute; pointer-events:none; filter:drop-shadow(0 10px 18px rgba(12,30,38,.35)); animation:bob 11s ease-in-out infinite alternate;}
  @keyframes bob{from{transform:translate(0,0) rotate(-3deg);} to{transform:translate(6px,-10px) rotate(2deg);}}
  .hero .orn{position:relative; width:clamp(86px,10vw,124px); margin-bottom:-4px;}
  .hero .orn.leaf{width:clamp(120px,15vw,200px); align-self:flex-end; margin:4px 4% 0 0; animation-duration:14s;}
  .bob{animation:bob 12s ease-in-out infinite alternate; filter:drop-shadow(0 10px 18px rgba(12,30,38,.35));}

  /* the line of days */
  .life{padding:18px 22px 16px; border-radius:18px; background:rgba(20,44,54,.32); border:1px solid rgba(247,243,234,.18);
        -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); display:flex; flex-direction:column; gap:8px;}
  .life-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px;}
  .life-label{font-family:var(--display); font-size:36px; line-height:1; color:var(--ink);}
  .life-sub{color:var(--ink-2); font-size:15px; font-variant-numeric:tabular-nums;}
  .life-scroll{overflow-x:auto; overflow-y:hidden; margin-inline:-8px; padding-inline:8px; scrollbar-width:thin; scrollbar-color:rgba(247,243,234,.3) transparent;}
  .life-track{position:relative; height:176px;}
  .life-track svg{position:absolute; left:0; top:0; height:100%; display:block; overflow:visible;}
  .node{position:absolute; top:88px; transform:translate(-50%,-50%); padding:0; margin:0; border:0; background:none; color:inherit; font:inherit; line-height:0;}
  button.node{cursor:pointer;}
  .node:focus-visible{outline:2px solid var(--gold); outline-offset:6px; border-radius:50%;}
  .node .dab{display:block; width:18px; height:15px; border-radius:52% 48% 57% 43% / 55% 45% 55% 45%; background:var(--c);
             box-shadow:0 0 0 3px rgba(247,243,234,.22), 0 2px 6px rgba(12,30,38,.45); transform:rotate(-12deg); transition:transform .25s ease;}
  button.node:hover .dab{transform:rotate(-12deg) scale(1.25);}
  .node .lil{display:block; width:44px; height:34px; background:url(img/lily.png) center/contain no-repeat; filter:drop-shadow(0 3px 5px rgba(12,30,38,.45));}
  .node .pin{display:block; width:8px; height:8px; border-radius:50%; background:var(--ink-3);}
  .node .now{display:block; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(241,210,122,.6); animation:ripple 3.2s ease-out infinite;}
  @keyframes ripple{from{box-shadow:0 0 0 0 rgba(241,210,122,.55);} to{box-shadow:0 0 0 16px rgba(241,210,122,0);}}
  .nl{position:absolute; left:50%; width:112px; transform:translateX(-50%); text-align:center; line-height:1.25; pointer-events:none;}
  .nl.up{bottom:calc(100% + 14px);} .nl.down{top:calc(100% + 14px);}
  .nl b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; font-size:15.5px; color:var(--ink); text-shadow:0 1px 8px rgba(12,30,38,.6);}
  .nl i{display:block; margin-top:2px; font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
  .nl.gold b{font-family:var(--display); font-weight:400; font-size:24px; color:var(--gold);}
  .nl.soft b{font-style:italic; font-weight:400; color:var(--ink-3);}

  /* pages floating on the water */
  .pond{position:relative; min-height:360px;}
  .pad{
    position:absolute; padding:0; margin:0; border:none; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer;
    transform:rotate(var(--rot)); animation:drift var(--dur) ease-in-out var(--delay) infinite alternate;
  }
  @keyframes drift{
    from{transform:translate(0,0) rotate(var(--rot));}
    to{transform:translate(5px,-8px) rotate(calc(var(--rot) + .9deg));}
  }
  .pad .ph{display:block; position:relative; overflow:hidden; border-radius:6px;
    -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 66%, rgba(0,0,0,.0) 100%);
            mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, #000 66%, rgba(0,0,0,.0) 100%);}
  .pad .ph img,.pad .ph video{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(.96); transition:transform 1.2s ease;}
  .pad:hover .ph img,.pad:hover .ph video{transform:scale(1.04);}
  .pad .ph.note{box-sizing:border-box; padding:22px 22px 0; border-radius:14px; background:rgba(20,44,54,.36); border:1px solid rgba(247,243,234,.2);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    -webkit-mask-image:linear-gradient(to bottom, #000 68%, transparent 100%); mask-image:linear-gradient(to bottom, #000 68%, transparent 100%);}
  .pad .ph.note span{display:block; white-space:pre-line; font-size:16px; line-height:1.75; color:var(--ink-2);}
  .pad .ph video{background:rgba(20,44,54,.45);}
  @media (max-width:560px){ .pad .ph.note{padding:14px 14px 0;} .pad .ph.note span{font-size:14px; line-height:1.65;} }
  .play{position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background:rgba(247,243,234,.82); box-shadow:0 2px 8px rgba(12,30,38,.4);}
  .play::after{content:""; position:absolute; left:12px; top:9px; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--card-ink);}
  .pad .lab{display:flex; flex-direction:column; gap:1px; padding:10px 6px 0; text-shadow:0 1px 10px rgba(12,30,38,.7);}
  .pad .lab b{font-family:var(--latin); font-weight:600; font-size:21px; letter-spacing:.06em; line-height:1.35;}
  .pad .lab i{font-style:normal; font-size:13.5px; line-height:1.6; color:var(--ink-2);
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pad .lab i.d{font-style:italic; color:var(--ink-3); font-variant-numeric:tabular-nums;}
  .bloom{position:absolute; left:-8px; top:-12px; width:52px; height:42px;
         background:url(img/lily.png) center/contain no-repeat; filter:drop-shadow(0 3px 6px rgba(12,30,38,.45));}
  .padleaf{position:absolute; z-index:-1; left:-18%; bottom:44px; width:62%; pointer-events:none; opacity:.95;
           filter:drop-shadow(0 6px 10px rgba(12,30,38,.3));}
  .padleaf.r{left:auto; right:-20%; transform:scaleX(-1);}
  .pond-empty{display:flex; flex-direction:column; align-items:center; gap:22px; padding-block:12px; text-align:center;}
  .pond-orns{display:flex; align-items:flex-end; justify-content:center; gap:4%; width:100%;}
  .pond-orns img:first-child{width:min(300px,52%);} .pond-orns img:last-child{width:min(150px,28%); animation-duration:14s;}
  .pond-empty .s{display:block; font-family:var(--display); font-size:34px; line-height:1.2; color:var(--ink);}

  .foot{margin:0; text-align:center; font-family:var(--display); font-size:26px; color:var(--ink-2); text-shadow:0 1px 8px rgba(12,30,38,.6);}

  /* the open page */
  /* while a page is open the pond behind it holds still — otherwise a wheel
     turned over the picture scrolls the water instead of the words */
  html.pond-locked, html.pond-locked body{overflow:hidden;}
  .sheet{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(14,30,38,.5);
         -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
  .card{background:var(--card); color:var(--card-ink); width:100%; max-width:900px; max-height:calc(100% - 8px); overflow:auto; border-radius:18px;
        display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); box-shadow:0 30px 80px rgba(8,22,30,.5);}
  .card.solo{grid-template-columns:1fr; max-width:640px;}
  .card.solo .pic{display:none;}
  @media (max-width:700px){ .card{grid-template-columns:1fr;} }
  /* the frame is measured to the shape of the picture that is in it, so the
     picture fills it edge to edge instead of floating in the middle */
  .card .pic{position:relative; background:var(--card-2);}
  /* the whole picture, never a cropped slice of it */
  .card .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; cursor:zoom-in;}
  .card .pic video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#1d333b;}

  /* an open page is given the whole window it can have */
  #card{width:min(1520px,96vw); max-width:none; height:min(94vh,1040px); max-height:96vh; overflow:hidden;
        grid-template-columns:auto minmax(330px,1fr);}
  #card .pic{align-self:stretch;}
  #card .fields{overflow:auto; overscroll-behavior:contain;}
  /* A page with no picture has no frame to sit beside, so the card itself is
     the scroller (see #card.solo below). Leaving .fields as a scroll box here
     would swallow the wheel: it is sized to its own words so it never
     overflows, and overscroll-behavior:contain stops the wheel from being
     passed up to the card — the page then looks frozen however hard you
     scroll. It steps aside and lets the card do the scrolling. */
  #card.solo .fields{overflow:visible; overscroll-behavior:auto;}
  /* a page with no picture stays a small, quiet thing */
  #card.solo{grid-template-columns:minmax(0,1fr); width:min(760px,94vw); height:auto; max-height:min(94vh,880px); overflow:auto;}
  @media (max-width:760px){
    #card{grid-template-columns:minmax(0,1fr); height:auto; max-height:96vh; overflow:auto;}
    #card .fields{overflow:visible;}
  }

  /* looking at one picture, and nothing else */
  .lightbox{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:24px;
            background:rgba(10,24,30,.88); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); cursor:zoom-out;}
  .lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 24px 60px rgba(0,0,0,.45);}
  .fields{padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px;}
  .fields label{display:flex; align-items:baseline; gap:10px; color:var(--card-ink-2);}
  .fields label .s{font-family:var(--display); font-size:30px; line-height:1.1; color:var(--card-ink);}
  .fields input,.fields textarea{font:inherit; color:var(--card-ink); background:var(--card-2); border:1px solid rgba(35,55,64,.14); border-radius:10px; padding:8px 12px; width:100%; box-sizing:border-box;}
  .fields #f-date{font-family:var(--latin); font-weight:500; font-size:18px; letter-spacing:.04em; width:auto; min-width:190px; color-scheme:light;}
  .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .card .btn{color:var(--card-ink); background:transparent; border:1px solid rgba(35,55,64,.35); -webkit-backdrop-filter:none; backdrop-filter:none;}
  .card .btn:hover{background:var(--card-2);}
  .card .btn.primary{background:var(--card-ink); color:var(--card); border-color:var(--card-ink);}
  .card .btn.danger{color:var(--card-ink-2); border-color:rgba(35,55,64,.18);}
  .card .btn.danger.armed{color:#a8324f; border-color:#a8324f;}
  .card .btn:focus-visible{outline:2px solid var(--accent);}
  #f-date-text{display:none; font-family:var(--latin); font-size:19px; letter-spacing:.04em; color:var(--card-ink);}
  .card.read #f-date{display:none;} .card.read #f-date-text{display:block;}
  .card.read .fields input,.card.read .fields textarea{background:transparent; border-color:transparent; padding-inline:0; resize:none; min-height:0; outline:none;}
  .card.read #f-media,.card.read #f-unmedia,.card.read #f-save,.card.read #f-del,.card.read .status{display:none;}
  .card:not(.read) #f-edit{display:none;}   /* Edit only lives in the reading view */
  .status{min-height:1.5em; margin:0; font-size:13.5px; color:var(--card-ink-2);}

  /* the words on the page. The reading view is plain text in a div, which
     sizes itself to its words with no measuring at all — a textarea can only
     be given a pixel height, and every pixel height eventually lies. */
  .fields .field{display:flex; flex-direction:column; gap:6px;}
  .fields #f-title{font-family:var(--latin); font-weight:600; font-size:21px; letter-spacing:.03em;}
  .fields #f-text{min-height:96px; line-height:1.75; resize:vertical;}
  /* While writing, the box stops at a share of the window and scrolls inside
     itself, so the day's words can never push the buttons off the page. */
  .card:not(.read) #f-text{max-height:min(46vh,480px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(35,55,64,.28) transparent;}
  .card:not(.read) #f-text::-webkit-scrollbar{width:8px;}
  .card:not(.read) #f-text::-webkit-scrollbar-thumb{background:rgba(35,55,64,.22); border-radius:8px;}
  .card:not(.read) #f-text::-webkit-scrollbar-track{background:transparent;}
  /* The reading view: the words laid out as words, scrolling with the page.
     Visibility is switched with the [hidden] attribute in app.js, since the
     stylesheet hides [hidden] outright. */
  #f-text-view{display:block; white-space:pre-line; font-family:var(--body); font-size:17px; line-height:1.75; color:var(--card-ink); overflow-wrap:anywhere;}
  .hint{font-family:var(--latin); font-size:13px; font-style:italic; color:var(--card-ink-2);}
  .card.read .hint{display:none;}

  /* every picture on the page, small, along the foot of it */
  .stripe{display:flex; flex-wrap:wrap; gap:8px;}
  .stripe:empty{display:none;}
  .card .stripe .thumb{position:relative; flex:none; width:66px; height:66px; padding:0; overflow:hidden; cursor:pointer;
    border-radius:10px; border:1px solid rgba(35,55,64,.2); background:var(--card-2);}
  .card .stripe .thumb img,.card .stripe .thumb video{display:block; width:100%; height:100%; object-fit:cover;}
  .card .stripe .thumb.on{outline:2px solid var(--accent); outline-offset:1px;}
  .card .stripe .thumb:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .card .stripe .thumb .vtag{position:absolute; left:50%; top:50%; width:0; height:0; margin:-7px 0 0 -3px;
    border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent rgba(247,243,234,.92);
    filter:drop-shadow(0 1px 3px rgba(12,30,38,.6));}
  .card .stripe .thumb .x{position:absolute; top:2px; right:2px; width:18px; height:18px; display:grid; place-items:center;
    font-size:13px; line-height:1; color:var(--card); background:rgba(20,44,54,.62); border-radius:50%;}
  .card .stripe .thumb:hover .x{background:#a8324f;}

  /* the corner: sign in + about */
  .topbar{position:absolute; top:18px; right:16px; z-index:2; display:flex; align-items:center; gap:8px;}
  .about-link{font-family:var(--display); font-size:26px; line-height:1; padding:8px 18px 10px;
    color:var(--ink); background:var(--glass); border:1px solid var(--glass-line); border-radius:999px; cursor:pointer;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .2s ease;}
  .about-link:hover{background:rgba(247,243,234,.22);}
  .about-link:focus-visible,.node.begin:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
  .about-link.who{font-size:20px; padding:10px 16px 11px; color:var(--ink-2);}
  .about-link.who::before{content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 0 3px rgba(241,210,122,.22); vertical-align:middle; position:relative; top:-1px;}
  @media (max-width:560px){ .topbar{top:12px; right:10px; gap:6px;} .about-link{font-size:21px; padding:6px 13px 8px;} .about-link.who{font-size:17px; padding:8px 12px 9px;} }

  button.node.begin:hover .pin{background:var(--gold);} button.node.begin:hover .nl b{color:var(--gold);}
  .about-card{max-width:940px; height:min(780px, calc(100% - 8px)); overflow:hidden; grid-template-rows:minmax(0,1fr);}
  .card .about-pic{background:url(img/pond.jpg) 30% 60%/cover; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .about-pic::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(24,44,54,.1), rgba(24,44,54,.3));}
  .about-pic img{position:relative !important; inset:auto !important; width:min(62%,240px) !important; height:auto !important; object-fit:contain !important;
    filter:drop-shadow(0 14px 22px rgba(12,30,38,.45)); animation:bob 12s ease-in-out infinite alternate;}
  .about-text{padding:30px 30px 24px; display:flex; flex-direction:column; gap:.6em; font-size:17.5px; line-height:1.72;}
  .about-text h2{margin:0 0 .2em; font-family:var(--display); font-weight:400; font-size:clamp(40px,5vw,52px); line-height:1.1; color:var(--card-ink);}
  .about-text p{margin:0; color:var(--card-ink);}
  .about-text .ps{margin-top:.5em; display:flex; flex-direction:column; gap:.45em;}
  .about-text .ps p{font-style:italic; font-size:16px; color:var(--card-ink-2);}
  .about-text .ps::before{content:""; display:block; width:34px; height:28px; margin:0 0 .3em; background:url(img/lily.png) center/contain no-repeat;}
  .about-edit{padding:24px; display:flex; flex-direction:column; gap:10px;}
  .about-edit textarea{font:inherit; font-size:16px; line-height:1.7; color:var(--card-ink); background:var(--card-2); border:1px solid rgba(35,55,64,.14);
    border-radius:10px; padding:10px 12px; min-height:360px; resize:vertical;}
  .about-foot{padding:0 30px 24px;}
  .about-card .about-body{display:flex; flex-direction:column; overflow:auto; min-height:0; overscroll-behavior:contain;}
  @media (max-width:700px){ .about-card{grid-template-rows:170px minmax(0,1fr);} .card .about-pic{min-height:0;} .about-pic img{width:min(38%,150px) !important;} .about-text{padding:22px 20px 18px;} .about-foot{padding:0 20px 20px;} }

  /* beneath the water: older pages, month by month */
  .deep{display:flex; flex-direction:column; gap:14px;}
  .deep-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding-inline:6px;}
  .month{border-radius:16px; background:rgba(20,44,54,.3); border:1px solid rgba(247,243,234,.16);
    -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1);}
  .month summary{list-style:none; display:flex; align-items:center; gap:14px; padding:12px 18px; cursor:pointer; border-radius:16px;}
  .month summary::-webkit-details-marker{display:none;}
  .month summary::before{content:""; width:22px; height:22px; flex:none; background:url(img/cursor-bud-64.png) center/contain no-repeat; transition:transform .3s ease;}
  .month[open] summary::before{background-image:url(img/cursor-bloom-64.png); transform:rotate(20deg);}
  .month summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  .month .m{font-family:var(--latin); font-weight:600; font-size:19px; letter-spacing:.06em;}
  .month .c{color:var(--ink-3); font-size:15px; font-style:italic;}
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; padding:6px 18px 20px;}
  @media (max-width:560px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:4px 12px 14px;} }
  .gcard{display:flex; flex-direction:column; text-align:left; padding:0; margin:0; font:inherit; color:var(--ink); cursor:pointer; overflow:hidden;
    border-radius:14px; background:rgba(20,44,54,.34); border:1px solid rgba(247,243,234,.2); transition:transform .25s ease, background .25s ease;}
  .gcard:hover{transform:translateY(-3px); background:rgba(20,44,54,.46);}
  .gcard:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
  .gcard .th{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:rgba(247,243,234,.06);}
  .gcard .th img,.gcard .th video{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(.96);}
  .gcard .th.note{padding:14px 14px 0; box-sizing:border-box; -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent);}
  .gcard .th.note span{display:block; white-space:pre-line; font-size:14.5px; line-height:1.65; color:var(--ink-2);}
  .gcard .th.note::after{content:""; position:absolute; right:8px; top:8px; width:30px; height:25px; background:url(img/lily.png) center/contain no-repeat;}
  .gcard .tx{display:flex; flex-direction:column; gap:1px; padding:10px 14px 14px;}
  .gcard .tx i.d{font-style:italic; font-size:13.5px; color:var(--ink-3);}
  .gcard .tx b{font-family:var(--latin); font-weight:600; font-size:18px; letter-spacing:.05em; line-height:1.35;}
  .gcard .tx span{font-size:14px; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

  /* the lily cursor and a ripple where you touch the water */
  @media (pointer:fine){
    html{cursor:url(img/cursor-bud-32.png) 16 4, auto;
         cursor:-webkit-image-set(url(img/cursor-bud-32.png) 1x, url(img/cursor-bud-64.png) 2x) 16 4, auto;}
    a,button,summary,label,.pad,.gcard,.about-link,button.node,input[type=date],input[type=file]{
         cursor:url(img/cursor-bloom-32.png) 16 16, pointer;
         cursor:-webkit-image-set(url(img/cursor-bloom-32.png) 1x, url(img/cursor-bloom-64.png) 2x) 16 16, pointer;}
    input[type=text],textarea{cursor:text;}
    .card.read textarea,.card.read input{cursor:inherit;}
    button:disabled{cursor:default;}
  }
  .ripple{position:fixed; z-index:50; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; pointer-events:none;
    border:1.5px solid rgba(247,243,234,.75); animation:ring .9s ease-out forwards;}
  .ripple.two{animation-delay:.14s; opacity:0; border-color:rgba(241,210,122,.6);}
  @keyframes ring{from{transform:scale(1); opacity:.9;} to{transform:scale(7); opacity:0;}}

  @media (prefers-reduced-motion: reduce){ body{transition:none;} .pad,.orn,.bob,.node .now,.about-pic img{animation:none;} .pad .ph img,.pad .ph video,.gcard{transition:none;} .ripple{display:none;} }

  /* the door (/login.html) */
  .login-wrap{position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
  .login-card{width:100%; max-width:470px;}
  .login-card .fields{padding:32px 32px 28px; gap:12px;}
  .login-card input{font-family:var(--latin); font-weight:500; font-size:19px; letter-spacing:.04em;}
  .login-card input[type=password]{letter-spacing:.2em;}
  .login-card .row{margin-top:2px;}
  /* the door's button: the same hand that writes who / the word, centred,
     with the pond's blossom riding along */
  .login-card .login-row{justify-content:center;}
  #login-go{font-family:var(--display); font-weight:400; font-size:30px; line-height:1.1; padding:8px 26px 12px;}
  #login-go .btn-bloom{width:22px; height:22px; margin-right:9px; vertical-align:-4px; filter:drop-shadow(0 1px 3px rgba(12,30,38,.35));}

  /* who wrote a page: a small coloured signature on cards, the timeline
     and the open page. The colour comes from the account's configuration. */
  .who{display:inline-flex; align-items:center; gap:6px; font-style:normal; font-family:var(--latin);
    letter-spacing:.07em; color:var(--wc, var(--ink-2)); white-space:nowrap;
    text-transform:capitalize;}   /* l signs as L, r as R */
  .who .dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--wc, var(--ink-3));
    box-shadow:0 0 7px var(--wc, transparent); opacity:.95;}
  .node .nl i.who{font-size:12.5px; line-height:1.6;}
  .node .nl i.who .dot{width:8px; height:8px;}
  .pad .lab .who{font-size:14.5px; margin-top:2px;}
  .pad .lab .who .dot{width:10px; height:10px;}
  .gcard .tx .who{font-size:13.5px; margin-top:2px;}
  .fields .who-line{font-size:16.5px; color:var(--card-ink-2); margin-top:-2px;}
  .fields .who-line .dot{width:11px; height:11px;}

  /* more than one picture: a small note of how many there are */
  .more{position:absolute; left:8px; bottom:8px; z-index:2; padding:2px 9px 3px; border-radius:999px;
    font-family:var(--latin); font-size:11.5px; letter-spacing:.05em; line-height:1.5; color:var(--ink);
    background:rgba(20,44,54,.52); border:1px solid rgba(247,243,234,.22);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none;}
  .pad .more{bottom:auto;}
  .gcard .th.note .more{top:8px; bottom:auto;}

  /* a page with words but no picture shows the words instead */
  .pad .ph.note span.t,.gcard .th.note span.t{font-family:var(--display); font-size:24px; line-height:1.2; color:var(--ink); margin-bottom:.3em;}
  .gcard .th.note span.t{font-size:21px;}
  .pad .lab i:not(.d),.gcard .tx i:not(.d){font-style:normal; font-family:var(--latin); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--ink);}

  /* a page that predates the picture rule, or lost its picture */
  .pad .ph.empty{display:block; border-radius:6px; background:rgba(20,44,54,.36); border:1px solid rgba(247,243,234,.18);}
  .th.empty{background:rgba(247,243,234,.04);}