/* v19 — lively + quiet. Original composition, using only portfolio-owned images.
   Brown type comes from the existing warm-paper palette; blue is a field, not a motif. */
.page-home,.page-projects{--paper:#dce8ed;--ink:#4d4036;--muted:#6c594a;--line:#b9c9cb;color:var(--ink);background:var(--paper)}
.page-home .hero-copy,.page-home .hero-index,.page-home .project-subtitle,.page-projects .project-subtitle{color:var(--ink)}
.page-home .text-link:hover,.page-projects .text-link:hover{color:#795740}
.page-home .home-hero{height:710px;margin:20px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);overflow:visible;background:#d5e5ed}
.page-home .hero-sea{inset:170px 0 auto auto;width:78%;height:470px;z-index:0;object-position:center 58%}
.page-home .hero-copy{position:relative;z-index:1;padding:24px 0 0;pointer-events:none}
.page-home .hero-copy h1{font-size:clamp(90px,12vw,178px);line-height:1.2;letter-spacing:.07em;margin:18px 0 26px;font-weight:400}
.page-home .hero-copy>p:last-child{font-size:19px;letter-spacing:.08em;max-width:15em}
.page-home .hero-index{left:var(--gutter);bottom:42px;background:transparent;padding:10px 0;gap:28px;border-bottom:1px solid currentColor;z-index:2}
.hero-fragments{position:absolute;z-index:2;right:calc(var(--gutter) + 20px);bottom:-20px;display:flex;gap:24px;align-items:end;width:390px}
.hero-fragment{display:block;background:#f2efe5;padding:9px 9px 7px;box-shadow:0 12px 25px #304c5820;min-width:0;transition:transform .5s ease}
.hero-fragment--ai{width:205px;margin-bottom:38px}
.hero-fragment--applied{width:165px}
.hero-fragment img{width:100%;height:auto;object-fit:contain}
.hero-fragment span{display:block;font-size:10px;letter-spacing:.04em;padding-top:8px;color:#4d4036}
.page-home .introduction{padding:150px 0 140px;grid-template-columns:1fr 2.5fr;gap:60px}
.page-home .introduction h2{font-size:clamp(30px,3vw,42px);font-weight:400;line-height:1.65;max-width:24em}
.page-home .introduction>div>p{font-size:17px;max-width:32em}
.page-home .intro-label .eyebrow{font-size:10px;line-height:2;max-width:14em}
.page-home .selected-works{border:0;padding-top:0}
.page-home .selected-works>.section-heading{padding-bottom:24px;margin-bottom:52px;border-bottom:1px solid var(--line)}
.page-home .section-heading h2{font-size:32px;font-weight:400}
.page-home .home-project__description{font-size:16px;line-height:1.95}
.page-home .home-project__copy h3{font-size:clamp(42px,5.8vw,82px);line-height:1.08}
.home-project__context{min-width:0;margin:0}
.home-project__context img{display:block;width:100%;height:auto;object-fit:contain}
.home-project__context figcaption{font-size:11px;line-height:1.7;margin-top:10px;color:var(--muted)}
.page-home .home-project--ocean-memory{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 28px;margin-bottom:150px}
.page-home .home-project--ocean-memory .home-project__image{grid-column:1/12;grid-row:1}
.page-home .home-project--ocean-memory .home-project__copy{grid-column:1/8;grid-row:2;display:block;margin:0}
.page-home .home-project--ocean-memory .home-project__description{max-width:29em;margin:24px 0}
.page-home .home-project--ocean-memory .home-project__context{grid-column:9/13;grid-row:2;margin-top:-64px;position:relative;background:var(--paper);padding:12px 0 0 12px}
.page-home .home-project--before-meeting-the-waves{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin:0 0 160px;width:100%}
.page-home .home-project--before-meeting-the-waves .home-project__copy{grid-column:1/10;grid-row:1;margin-bottom:22px;max-width:820px}
.page-home .home-project--before-meeting-the-waves .home-project__image{grid-column:4/13;grid-row:2}
.page-home .home-project--before-meeting-the-waves .home-project__context{grid-column:1/5;grid-row:3;margin-top:-74px;position:relative;padding:0 12px 0 0;background:var(--paper)}
.page-home .home-project--ai-human{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:34px;margin-bottom:0;align-items:start}
.page-home .home-project--ai-human .home-project__copy{grid-column:1/5;grid-row:1;align-self:start}
.page-home .home-project--ai-human .home-project__image{grid-column:5/13;grid-row:1/3;padding:0;background:transparent}
.page-home .home-project--ai-human .home-project__context{grid-column:2/5;grid-row:2;width:92%;align-self:end}
.page-home .home-project--ai-human .home-project__copy h3{font-size:clamp(42px,5vw,72px)}
.page-home .tide-pause{max-width:none;margin:90px calc(-1 * var(--gutter)) 120px;padding:100px var(--gutter);background:#ebf0ec;display:flex;justify-content:center}
.page-home .tide-pause p{font:400 clamp(26px,3.2vw,44px)/1.9 var(--display);max-width:25em;letter-spacing:.02em}
.page-home .home-project--applied-works{margin-bottom:100px}
.page-home .home-project--applied-works .home-project__copy{max-width:780px;margin-bottom:54px}
.page-home .archive-preview,.page-projects .archive-preview{padding:0;background:transparent;gap:60px;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start}
.page-home .archive-preview__project,.page-projects .archive-preview__project{padding:0;background:transparent;color:var(--ink)}
.page-home .archive-preview__project--zoth-design,.page-projects .archive-preview__project--zoth-design{margin-top:100px}
.page-home .archive-preview img,.page-projects .archive-preview img{height:auto;object-fit:contain;background:transparent}
.page-home .archive-preview figcaption,.page-projects .archive-preview figcaption{display:block;font-size:12px;padding-top:16px}
.page-home .archive-preview figcaption span,.page-projects .archive-preview figcaption span{display:block}
.page-home .archive-preview .caption,.page-projects .archive-preview .caption{font-size:11px;margin-top:8px}
.page-home .open-water{margin-inline:calc(-1 * var(--gutter));background:#c3dce9;padding-bottom:30px}
.page-home .open-water img{aspect-ratio:3.5;object-fit:cover}
.page-home .open-water figcaption{color:var(--ink);padding-top:20px}
/* The index keeps its own reading pace: one system, one film, then two material worlds. */
.page-projects .index-heading{display:grid;grid-template-columns:1.5fr 1fr;gap:22px 70px;align-items:end;padding-top:90px;padding-bottom:100px}
.page-projects .index-heading .eyebrow{grid-column:1/-1}
.page-projects .index-heading h1{font-size:clamp(65px,8vw,116px);margin:0;font-weight:400}
.page-projects .index-heading>p:last-child{font-size:16px;line-height:1.9;max-width:22em}
.page-projects .index-project{border:0;padding-top:0}
.page-projects .index-project--ocean-memory{grid-column:1/12}
.page-projects .index-project--before-meeting-the-waves{grid-column:5/13}
.page-projects .index-project--ai-human{grid-column:1/9}
.page-projects .index-project--applied-works{grid-column:4/13;margin-top:30px}
.page-projects .index-project h2{font-size:clamp(38px,4.8vw,68px)}
.page-projects .index-project--applied-works .archive-preview{grid-template-columns:1.25fr .75fr;gap:45px}
.page-projects .index-project--applied-works .archive-preview img{height:auto}
.work-entry{position:relative;min-width:0}
.entry-cue{display:flex;justify-content:space-between;gap:24px;min-height:42px;align-items:center;color:var(--ink);font-size:12px;letter-spacing:.04em;transition:opacity .3s ease,transform .3s ease}
@media(hover:hover) and (pointer:fine){
 .entry-cue{opacity:0;transform:translateY(-4px)}
 .work-entry:hover .entry-cue,.work-entry:focus-visible .entry-cue{opacity:1;transform:none}
 .hero-fragment:hover,.hero-fragment:focus-visible{transform:translateY(-6px)}
 /* No zoom/crop of the static artwork on overview entry. */
 .home-project__image:hover img,.index-project__visual:hover img{transform:none}
}
/* The conceptual chronology now reads left-to-right: Surface → Opening → Inside. */
.boundary-reading{max-width:1100px;margin:105px auto 30px;text-align:left}
.boundary-reading>p:last-child{font-size:17px;line-height:1.9;margin-top:10px}
.boundary-sequence{margin-top:0}
.boundary-sequence .boundary-detail{grid-row:1}
.boundary-sequence .boundary-detail--1{grid-column:1}
.boundary-sequence .boundary-detail--2{grid-column:2}
.boundary-sequence .boundary-detail--3{grid-column:3}
.boundary-detail figcaption{display:flex;align-items:baseline;gap:12px}
.sequence-number{font:400 32px/1.2 var(--serif)}
.boundary-detail--1 .sequence-number{color:#763f41}
/* Complete the existing packaging narrative with the original in-use photo at the close. */
.packaging-note{margin-top:56px}
.jh-inuse-closing{max-width:940px;margin:130px 0 0 auto}
.jh-inuse-closing>.eyebrow{margin-bottom:24px}
.jh-inuse-closing .packaging-spread__context{width:80%;margin:0}
.project-ocean-memory .ocean-cta{border-radius:2px;transition:background .3s ease,border-color .3s ease}
.project-ocean-memory .ocean-cta:focus-visible .ocean-icon{transform:rotate(-5deg) translateY(-2px)}
.project-ocean-memory .ocean-cta:hover .ocean-icon{transform:rotate(-7deg) translateY(-3px)}
/* Progressive enhancement: class added only after the observer is ready. */
.v19-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--v19-delay,0ms),transform .8s cubic-bezier(.22,.61,.36,1) var(--v19-delay,0ms)}
.v19-reveal.is-visible{opacity:1;transform:none}
.project-page main>section:first-child{animation:world-entry .55s ease both}
@keyframes world-entry{from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1000px){
 .page-home .home-hero{height:680px}
 .page-home .hero-sea{width:88%;top:155px;height:425px}
 .page-home .hero-copy h1{font-size:clamp(78px,12vw,120px)}
 .page-home .hero-copy>p:last-child{font-size:17px}
 .hero-fragments{width:300px;right:var(--gutter);bottom:5px;gap:16px}
 .hero-fragment--ai{width:160px;margin-bottom:28px}.hero-fragment--applied{width:125px}
 .page-home .introduction{gap:35px;padding:100px 0 110px;grid-template-columns:1fr 3fr}
 .page-home .home-project--ocean-memory{gap:20px}
 .page-home .home-project--ocean-memory .home-project__copy{grid-column:1/8}
 .page-home .home-project--ocean-memory .home-project__context{grid-column:8/13;margin-top:0}
 .page-home .home-project--ai-human{gap:25px}
 .page-home .home-project--ai-human .home-project__copy{grid-column:1/8;grid-row:1}
 .page-home .home-project--ai-human .home-project__image{grid-column:4/13;grid-row:2/4}
 .page-home .home-project--ai-human .home-project__context{grid-column:1/4;grid-row:2;width:100%;align-self:start;margin-top:65px}
 .page-home .archive-preview{gap:32px}
 .page-projects .index-heading{grid-template-columns:1fr;gap:25px;padding-bottom:70px}
 .page-projects .index-project--applied-works{grid-column:3/13}
 .boundary-reading{margin-top:75px}
}
@media(max-width:600px){
 .page-home .home-hero{height:660px;margin-top:12px}
 .page-home .hero-copy{padding-top:18px}
 .page-home .hero-copy h1{font-size:clamp(50px,13.4vw,78px);letter-spacing:.07em;margin:24px 0 16px}
 .page-home .hero-copy>p:last-child{font-size:15px;max-width:none}
 .page-home .hero-sea{width:100%;top:205px;height:310px}
 .hero-fragments{right:22px;bottom:15px;width:256px;gap:15px}
 .hero-fragment--ai{width:136px;margin-bottom:28px}.hero-fragment--applied{width:105px}
 .hero-fragment{padding:6px}.hero-fragment span{font-size:9px}
 .page-home .hero-index{bottom:17px;left:22px;font-size:11px;gap:12px;writing-mode:vertical-rl;border-bottom:0;border-left:1px solid currentColor;padding:0 0 0 8px}
 .page-home .introduction{display:block;padding:90px 0 80px}
 .page-home .intro-label{margin-bottom:28px}.page-home .intro-label .eyebrow{max-width:none}
 .page-home .introduction h2{font-size:28px;line-height:1.7}.page-home .introduction>div>p{font-size:16px}
 .page-home .selected-works>.section-heading{align-items:start;margin-bottom:30px}.page-home .section-heading h2{font-size:25px}
 .page-home .home-project--ocean-memory,.page-home .home-project--before-meeting-the-waves,.page-home .home-project--ai-human{display:flex;flex-direction:column;gap:22px;margin-bottom:85px}
 .page-home .home-project--ocean-memory .home-project__context{width:76%;margin:12px 0 0 auto;padding:0}
 .page-home .home-project__copy h3{font-size:42px}
 .page-home .home-project--before-meeting-the-waves .home-project__copy{margin-bottom:0}
 .page-home .home-project--before-meeting-the-waves .home-project__context{width:72%;margin:0;padding:0}
 .page-home .home-project--ai-human .home-project__image{margin:0;width:100%}
 .page-home .home-project--ai-human .home-project__context{width:58%;margin:0 0 0 auto}
 .page-home .tide-pause{margin:0 calc(-1 * var(--gutter)) 85px;padding:64px var(--gutter)}
 .page-home .tide-pause p{font-size:27px;line-height:1.9}
 .page-home .home-project--applied-works .home-project__copy{margin-bottom:32px}
 .page-home .archive-preview,.page-projects .index-project--applied-works .archive-preview{display:grid;grid-template-columns:1fr;gap:40px}
 .page-home .archive-preview__project--zoth-design,.page-projects .archive-preview__project--zoth-design{width:76%;margin:0 0 0 auto}
 .page-home .open-water img{aspect-ratio:1.6}.page-home .open-water figcaption{font-size:11px}
 .page-projects .index-heading{padding:50px 0 60px}.page-projects .index-heading h1{font-size:64px}
 .page-projects .index-project h2{font-size:38px}.entry-cue{opacity:1;transform:none}
 .boundary-reading{text-align:left;margin-top:58px}.boundary-reading__desktop{display:none}
 .boundary-sequence{display:flex;flex-direction:column;gap:34px}
 .boundary-sequence .boundary-detail{width:88%;margin-top:0;align-self:flex-start}
 .boundary-sequence .boundary-detail--2{align-self:center}.boundary-sequence .boundary-detail--3{align-self:flex-end}
 .jh-inuse-closing{margin-top:75px}.jh-inuse-closing .packaging-spread__context{width:90%}
}
@media(prefers-reduced-motion:reduce){
 .v19-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .project-page main>section:first-child{animation:none}
 .hero-fragment,.entry-cue,.ocean-cta,.ocean-cta .ocean-icon{transition:none!important;transform:none!important}
 .entry-cue{opacity:1}
}


/* v19.1 — Life Ocean refinement.
   "Lively + quiet": mist blue, ocean depth, brown typography, print-like layering.
   Reference material is NOT embedded; this is an original system built from portfolio-owned assets. */
.page-home,.page-projects{
  --life-mist:#dce8ed;
  --life-mist-2:#c8dce6;
  --life-ocean:#6e9fba;
  --life-ocean-deep:#37677d;
  --life-brown:#4d4036;
  --life-cream:#f2ede3;
}
.page-home .home-hero{
  min-height:720px;
  background:
    radial-gradient(circle at 16% 20%,rgba(255,255,255,.68) 0 1px,transparent 1.8px) 0 0/19px 19px,
    linear-gradient(155deg,#e8f0f2 0%,var(--life-mist) 38%,#c9dde7 100%);
  border-top:1px solid rgba(77,64,54,.18);
}
.page-home .home-hero::before{
  content:"";position:absolute;z-index:0;left:6%;right:4%;top:148px;height:475px;
  background:rgba(255,255,255,.18);border:1px solid rgba(77,64,54,.12);
  transform:rotate(-.8deg);pointer-events:none;
}
.page-home .home-hero::after{
  content:"LIFE MOVES  ·  TRACES REMAIN";position:absolute;z-index:2;right:var(--gutter);top:88px;
  color:var(--life-brown);font:500 10px/1.2 var(--sans);letter-spacing:.18em;
  writing-mode:vertical-rl;opacity:.72;pointer-events:none;
}
.page-home .hero-sea{
  top:184px;right:3%;width:80%;height:445px;border:10px solid rgba(242,237,227,.84);
  box-shadow:0 22px 50px rgba(53,83,96,.14);transform:rotate(.45deg);
  object-position:center 61%;
}
.page-home .hero-copy{z-index:3;padding-top:18px}
.page-home .hero-copy h1{
  color:var(--life-brown);text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.page-home .hero-copy>p:last-child{color:var(--life-brown);font-family:var(--display);font-size:21px;letter-spacing:.05em}
.page-home .hero-index{z-index:5;color:var(--life-brown)}
.page-home .hero-fragments{z-index:4;right:calc(var(--gutter) + 5px);bottom:-42px;width:430px;gap:0;align-items:center}
.page-home .hero-fragment{
  background:var(--life-cream);border:1px solid rgba(77,64,54,.18);box-shadow:0 18px 34px rgba(47,73,84,.16);
  transform-origin:center;will-change:transform;
}
.page-home .hero-fragment--ai{width:225px;margin:0 -22px 48px 0;transform:rotate(-3deg)}
.page-home .hero-fragment--applied{width:180px;transform:rotate(2.5deg)}
.page-home .hero-fragment span{font-family:var(--serif);letter-spacing:.06em}

/* Calm reading area after the lively first screen. */
.page-home .introduction{position:relative;padding-top:180px}
.page-home .introduction::before{
  content:"";position:absolute;left:25%;right:4%;top:92px;height:1px;background:rgba(77,64,54,.22);transform:rotate(-1deg)
}
.page-home .introduction h2{font-size:clamp(34px,3.4vw,49px);line-height:1.72}
.page-home .introduction>div>p{max-width:36em}

/* Editorial project rhythm: full → open → full. Large ghost numbers are print cues, not UI cards. */
.page-home .home-project{position:relative;isolation:isolate}
.page-home .home-project::before{
  position:absolute;z-index:-1;font:400 clamp(112px,16vw,230px)/1 var(--serif);color:rgba(77,64,54,.055);
  letter-spacing:-.06em;pointer-events:none;
}
.page-home .home-project--ocean-memory::before{content:"01";right:2%;top:-75px}
.page-home .home-project--before-meeting-the-waves::before{content:"02";left:-4%;top:-80px}
.page-home .home-project--ai-human::before{content:"03";right:-2%;top:-70px}
.page-home .home-project--applied-works::before{content:"04";left:2%;top:-70px}
.page-home .home-project--ai-human{
  margin-inline:calc(-1 * var(--gutter));padding:105px var(--gutter) 120px;
  background:linear-gradient(145deg,#c7dbe5 0%,#dce8ed 72%);
  border-top:1px solid rgba(77,64,54,.13);border-bottom:1px solid rgba(77,64,54,.13)
}
.page-home .home-project--ai-human .home-project__image{
  background:rgba(242,237,227,.36);padding:14px;box-shadow:0 18px 46px rgba(50,80,93,.10)
}
.page-home .home-project--ai-human .home-project__context{transform:rotate(-1.5deg)}
.page-home .tide-pause{
  position:relative;background:transparent;margin-top:0;margin-bottom:120px;padding:125px var(--gutter) 135px;
}
.page-home .tide-pause::before{
  content:"";position:absolute;left:6%;right:6%;top:50%;height:54%;transform:translateY(-50%) rotate(.5deg);
  background:#eaf0ef;border:1px solid rgba(77,64,54,.10);z-index:-1
}
.page-home .tide-pause p{color:var(--life-brown);font-size:clamp(30px,3.7vw,52px);line-height:1.75}
.page-home .open-water{position:relative;background:#bfd8e5;border-top:1px solid rgba(77,64,54,.16)}
.page-home .open-water::after{
  content:"人生海海";position:absolute;right:var(--gutter);top:18px;color:rgba(77,64,54,.64);
  font:400 clamp(28px,4vw,54px)/1.2 var(--display);letter-spacing:.08em;pointer-events:none
}

/* Interaction: small physical shifts, no zoom. */
@media(hover:hover) and (pointer:fine){
  .page-home .hero-fragment--ai:hover,.page-home .hero-fragment--ai:focus-visible{transform:rotate(-1deg) translateY(-8px)}
  .page-home .hero-fragment--applied:hover,.page-home .hero-fragment--applied:focus-visible{transform:rotate(.8deg) translateY(-8px)}
  .page-home .home-project__image{transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .55s ease}
  .page-home .home-project__image:hover,.page-home .home-project__image:focus-visible{transform:translateY(-5px);box-shadow:0 18px 45px rgba(44,72,85,.10)}
}
@media(max-width:1000px){
  .page-home .home-hero{min-height:690px}
  .page-home .hero-sea{width:87%;top:180px;height:420px}
  .page-home .hero-fragments{width:320px;bottom:-8px}
  .page-home .hero-fragment--ai{width:170px;margin-right:-18px}.page-home .hero-fragment--applied{width:135px}
}
@media(max-width:600px){
  .page-home .home-hero{min-height:680px;overflow:hidden}
  .page-home .home-hero::before{left:5%;right:0;top:205px;height:300px}
  .page-home .home-hero::after{top:120px;right:12px;font-size:8px}
  .page-home .hero-sea{top:220px;right:-2%;width:102%;height:300px;border-width:6px}
  .page-home .hero-fragments{width:265px;right:18px;bottom:12px}
  .page-home .hero-fragment--ai{width:145px;margin-right:-14px;margin-bottom:22px}.page-home .hero-fragment--applied{width:114px}
  .page-home .introduction{padding-top:110px}.page-home .introduction::before{top:56px;left:0}
  .page-home .home-project--ai-human{padding-top:70px;padding-bottom:85px}
  .page-home .home-project::before{font-size:118px;top:-35px}
  .page-home .tide-pause{padding-block:90px;margin-bottom:85px}
  .page-home .open-water::after{font-size:34px;top:15px}
}
@media(prefers-reduced-motion:reduce){
  .page-home .hero-fragment,.page-home .home-project__image{transition:none!important;transform:none!important}
}
.page-home .hero-fragment--ai{transform:translate(var(--drift-x,0),var(--drift-y,0)) rotate(-3deg)}
.page-home .hero-fragment--applied{transform:translate(var(--drift-x,0),var(--drift-y,0)) rotate(2.5deg)}
@media(hover:hover) and (pointer:fine){
 .page-home .hero-fragment--ai:hover,.page-home .hero-fragment--ai:focus-visible{transform:translate(var(--drift-x,0),calc(var(--drift-y,0) - 8px)) rotate(-1deg)}
 .page-home .hero-fragment--applied:hover,.page-home .hero-fragment--applied:focus-visible{transform:translate(var(--drift-x,0),calc(var(--drift-y,0) - 8px)) rotate(.8deg)}
}


/* A single owned star mark ties the front door back to the portfolio's recurring sky/sea language. */
.page-home .hero-copy h1::after{
  content:"";display:inline-block;width:clamp(28px,3.4vw,50px);aspect-ratio:1;margin-left:.18em;
  background:url("assets/site-stars/IMG_1118.png") center/contain no-repeat;vertical-align:.18em;
  filter:drop-shadow(0 3px 6px rgba(77,64,54,.08));
  animation:life-star-drift 5.8s ease-in-out infinite alternate;
}
@keyframes life-star-drift{from{transform:translateY(2px) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.page-home .hero-copy h1::after{animation:none}}