/* ============================================================
   13AKIRA — Giulia Nannini
   Washi paper, sumi ink, shu (cinnabar), a single stroke of gold.
   Woodblock-print logic: hard keylines, seals, mincho display.
   ============================================================ */

:root{
  --paper:      #ECE3D2;
  --paper-deep: #E2D6BF;
  --sumi:       #14100D;
  --sumi-soft:  #4a423a;
  --shu:        #C8322A;
  --shu-deep:   #9e241d;
  --gold:       #B8873B;
  --line:       rgba(20,16,13,.20);

  --measure: 64ch;
  --fs-body: 1.08rem;

  --serif: "Shippori Mincho B1","Shippori Mincho","Hiragino Mincho ProN",
           "Yu Mincho",Georgia,"Times New Roman",serif;
  --sans:  "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",
           "Helvetica Neue",Arial,system-ui,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--sumi);
  background-color:var(--paper);
  background-image:url("images/paper.png");
  background-size:256px 256px;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--shu); color:var(--paper); }
:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; }

.wrap{ width:min(1180px,100% - 2.4rem); margin-inline:auto; }

/* ---------- seal (落款) ---------- */
.seal{
  display:inline-grid; grid-template-columns:1fr 1fr; place-items:center;
  width:var(--seal-size,46px); height:var(--seal-size,46px);
  background:var(--shu); color:var(--paper);
  font-family:var(--serif); font-weight:600; line-height:1;
  border-radius:3px; padding:5px; user-select:none;
}
.seal span{ font-size:calc(var(--seal-size,46px) * .34); }
.seal-sm{ --seal-size:42px; }
.seal-lg{ --seal-size:66px; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.1) blur(7px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; gap:1rem; padding:.6rem 0; }
.lockup{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.lockup-text{ display:flex; align-items:baseline; gap:.5ch; font-family:var(--serif); white-space:nowrap; }
.lockup .mark{ font-weight:800; font-size:1.18rem; letter-spacing:.05em; }
.lockup .sep{ color:var(--shu); font-weight:700; }
.lockup .name{ font-weight:700; font-size:1.12rem; color:var(--sumi); white-space:nowrap; }
.nav{ margin-left:auto; display:flex; gap:1.4rem; }
.nav a{
  text-decoration:none; font-size:.98rem; color:var(--sumi-soft);
  padding-bottom:2px; border-bottom:1.5px solid transparent;
}
.nav a:hover{ color:var(--sumi); border-color:var(--shu); }

/* ---------- hero ---------- */
.hero{ padding:clamp(2.4rem,6vw,5.2rem) 0 clamp(1.6rem,4vw,3rem); }
.hero .wrap{
  display:grid; gap:clamp(1.6rem,4vw,3.6rem);
  grid-template-columns:1.05fr .95fr; align-items:center;
}
.hero-text{ position:relative; }
.hero-text .tategaki{ top:-.3rem; right:-.4rem; font-size:1.15rem; }
.kicker{
  font-family:var(--serif); font-style:italic;
  color:var(--sumi-soft); margin:0 0 .7rem; font-size:1.02rem;
  padding-left:2.6rem; position:relative;
}
.kicker::before{
  content:""; position:absolute; left:0; top:.7em;
  width:2rem; height:2px; background:var(--shu);
}
.wordmark{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(3.8rem,12vw,7.6rem); line-height:.88;
  letter-spacing:.015em; margin:0;
}
.realname{
  font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.5rem);
  margin:.5rem 0 1.3rem; padding-bottom:1rem;
  border-bottom:2px solid var(--gold); display:inline-block;
}
.realname .jp{ color:var(--shu); font-size:.82em; margin-left:.6ch; }
.hero-role{ font-size:1.14rem; margin:0 0 1.5rem; max-width:38ch; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.btn{
  font-family:var(--sans); font-size:1rem; text-decoration:none;
  padding:.66rem 1.2rem; border-radius:2px; border:1.5px solid var(--sumi);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-solid{ background:var(--sumi); color:var(--paper); }
.btn-solid:hover{ background:var(--shu); border-color:var(--shu); }
.btn-ghost:hover{ border-color:var(--shu); color:var(--shu-deep); }

.hero-art{ position:relative; }
/* ukiyo-e double keyline frame */
.frame{
  display:block; padding:8px; background:var(--paper);
  border:1px solid var(--sumi);
  box-shadow:0 0 0 1px var(--paper) inset, 0 0 0 4px var(--sumi) inset,
             14px 14px 0 var(--paper-deep);
}
.frame img{ width:100%; height:auto; display:block; }
.hero-art .seal-lg{
  position:absolute; right:-16px; bottom:-16px;
  box-shadow:0 4px 14px rgba(20,16,13,.28);
}

/* ---------- section scaffolding ---------- */
section{ padding:clamp(2.4rem,6vw,4.6rem) 0; scroll-margin-top:70px; position:relative; }
.sec-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.sec-head .kanji{
  font-family:var(--serif); background:var(--sumi); color:var(--paper);
  font-size:1.35rem; line-height:1; padding:.42rem .5rem; border-radius:3px;
}
.sec-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.15rem); margin:0; text-wrap:balance; }
.sec-head .en{ margin-left:auto; color:var(--sumi-soft); font-size:.92rem; align-self:end; max-width:34ch; text-align:right; text-wrap:balance; }

/* ---------- gallery ---------- */
.gallery{ column-count:3; column-gap:1.15rem; }
.tile{
  break-inside:avoid; margin:0 0 1.35rem; cursor:zoom-in;
  background:none; border:0; padding:0; width:100%; text-align:left;
  color:inherit; font:inherit; display:block;
}
.tile .shot{ position:relative; }
.tile img{ width:100%; height:auto; border:1px solid var(--sumi); transition:filter .25s ease; }
.tile .corner{
  position:absolute; top:8px; right:8px; --seal-size:30px;
  opacity:0; transform:scale(.7); transition:opacity .22s ease,transform .22s ease;
}
.tile:hover img, .tile:focus-visible img{ filter:brightness(1.05) saturate(1.05); }
.tile:hover .corner, .tile:focus-visible .corner{ opacity:1; transform:scale(1); }
.tile figcaption{ margin-top:.55rem; }
.tile .cap-top{ display:flex; align-items:baseline; gap:.6ch; }
.tile .t{ font-family:var(--serif); font-size:1.05rem; }
.tile .jp{ color:var(--shu); font-size:.9rem; }
.tile .pop{ color:var(--sumi-soft); font-size:.85rem; margin-left:auto; text-align:right; }
.tile .canon{
  font-family:var(--serif); font-style:italic; color:var(--shu-deep);
  font-size:.86rem; margin-top:.1rem;
}
.tile:hover .t{ text-decoration:underline; text-decoration-color:var(--shu); text-underline-offset:3px; }

/* ---------- statement / essay ---------- */
.statement{ background:var(--sumi); color:var(--paper); overflow:hidden; }
.statement .sec-head .kanji{ background:var(--shu); }
.statement .sec-head h2{ color:var(--paper); }
.statement .sec-head .en{ color:rgba(236,227,210,.6); }
.statement .wrap{ max-width:940px; }

.essay{ max-width:var(--measure); }
.essay p{ margin:0 0 1.15rem; }
.essay .lead{ font-family:var(--serif); font-size:1.24rem; line-height:1.55; }
.essay .lead::first-letter{
  font-family:var(--serif); font-weight:800; float:left;
  font-size:3.6rem; line-height:.72; padding:.08em .12em 0 0; color:var(--shu);
}
.essay em, .canon em{ font-style:italic; color:inherit; }

.canon{
  margin-top:2.4rem; padding:1.8rem 0 .4rem;
  border-top:2px solid var(--gold);
}
.canon h3{ font-family:var(--serif); font-weight:700; font-size:1.35rem; margin:0 0 .4rem; }
.canon-intro{ color:rgba(236,227,210,.72); margin:0 0 1.6rem; max-width:var(--measure); }
.canon-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.canon-cell{
  display:flex; align-items:stretch;
  aspect-ratio:21 / 9;
  background:#000; border:1px solid #fff;
}
.canon-cell .c-txt{
  flex:1 1 auto; min-width:0;
  padding:.85rem 1.05rem;
  display:flex; flex-direction:column; justify-content:center;
}
.canon-cell .c-txt h4{ font-family:var(--serif); font-weight:600; font-size:1.02rem; margin:0 0 .3rem; color:var(--paper); }
.canon-cell .c-txt h4 span{ color:var(--shu); font-weight:500; margin-left:.4ch; font-size:.9em; }
.canon-cell .c-txt p{ margin:0; color:rgba(236,227,210,.8); font-size:.9rem; line-height:1.4; }
.canon-cell img{
  flex:0 0 34%; max-width:190px;
  height:100%; object-fit:cover;
  border-left:1px solid #fff;
}

.refs{
  margin-top:2rem; font-size:.9rem; color:rgba(236,227,210,.6);
  max-width:var(--measure);
}
.refs em{ color:var(--paper); font-style:normal; }

/* ---------- instagram (Behold widget) ---------- */
.ig .sec-head .en{ text-decoration:none; border-bottom:1.5px solid var(--shu); padding-bottom:1px; }
.ig-embed{ max-width:820px; }
.ig-embed behold-widget{ display:block; --behold-gap:.55rem; --behold-border-radius:0; }
.ig-follow{ display:inline-block; margin-top:1.4rem; }

/* ---------- contact ---------- */
.contact .rows{ display:grid; gap:.35rem; max-width:var(--measure); }
.contact .row{ display:flex; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.contact .row .k{ width:9ch; color:var(--sumi-soft); flex:none; }
.contact .row a{ text-decoration:none; border-bottom:1.5px solid var(--shu); padding-bottom:1px; }
.contact .row a:hover{ color:var(--shu-deep); }

/* ---------- how i work + faq ---------- */
.steps{ list-style:none; margin:0 0 2.6rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem; max-width:900px; }
.steps li{ display:flex; gap:1rem; align-items:flex-start; }
.steps .n{ font-family:var(--serif); font-weight:800; font-size:1.6rem; color:var(--shu); line-height:1; flex:none; width:2.2ch; }
.steps h3{ font-family:var(--serif); font-weight:600; font-size:1.12rem; margin:.1rem 0 .3rem; }
.steps p{ margin:0; color:var(--sumi-soft); font-size:.98rem; line-height:1.5; }
.faq{ max-width:var(--measure); }
.faq h3{ font-family:var(--serif); font-weight:600; font-size:1.25rem; margin:0 0 1rem; }
.faq details{ border-bottom:1px solid var(--line); padding:.7rem 0; }
.faq summary{ cursor:pointer; font-family:var(--serif); font-size:1.05rem; list-style:none; position:relative; padding-right:1.6rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:-.05em; color:var(--shu); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:.7rem 0 0; color:var(--sumi-soft); max-width:var(--measure); }

/* ---------- booking form ---------- */
.book{ background:var(--sumi); color:var(--paper); }
.book .sec-head .kanji{ background:var(--shu); }
.book .sec-head h2{ color:var(--paper); }
.book .sec-head .en{ color:rgba(236,227,210,.6); }
.book-intro{ color:rgba(236,227,210,.8); max-width:var(--measure); margin:0 0 1.8rem; }
.intake{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; max-width:720px; }
.intake .field{ display:flex; flex-direction:column; gap:.35rem; }
.intake .field:not(.two){ grid-column:1 / -1; }
.intake label{ font-size:.9rem; color:rgba(236,227,210,.75); }
.intake input, .intake textarea{
  font:inherit; color:var(--paper); background:rgba(236,227,210,.06);
  border:1px solid rgba(236,227,210,.3); border-radius:2px; padding:.6rem .7rem;
}
.intake input:focus, .intake textarea:focus{ outline:2px solid var(--shu); outline-offset:1px; border-color:transparent; }
.intake textarea{ resize:vertical; }
.intake .check{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:.6ch; font-size:.95rem; color:rgba(236,227,210,.85); }
.intake .check input{ width:auto; }
.intake button{ grid-column:1 / -1; justify-self:start; cursor:pointer; background:var(--shu); border-color:var(--shu); color:var(--paper); }
.intake button:hover{ background:var(--shu-deep); border-color:var(--shu-deep); }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:1.8rem 0; margin-top:1rem; }
.foot .wrap{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.foot-nav{ display:flex; gap:1.1rem; }
.foot-nav a{ color:var(--sumi-soft); text-decoration:none; font-size:.92rem; border-bottom:1.5px solid transparent; }
.foot-nav a:hover{ color:var(--sumi); border-color:var(--shu); }
.foot .seal-sm{ --seal-size:38px; }
.foot-mark{ font-family:var(--serif); }
.foot-mark strong{ letter-spacing:.05em; }
.foot small{ color:var(--sumi-soft); margin-left:auto; }

/* ---------- subpages (diario, article, legal, thanks) ---------- */
.page-top{ padding:clamp(2.4rem,6vw,4.4rem) 0 1rem; }
.page-top .kicker{ padding-left:2.6rem; }
.page-title{ font-family:var(--serif); font-weight:800; font-size:clamp(2.2rem,6vw,3.6rem); line-height:1; margin:.3rem 0 .6rem; }
.page-title .jp{ color:var(--shu); font-size:.5em; margin-left:.6ch; vertical-align:middle; }
.page-lead{ font-family:var(--serif); font-size:1.2rem; color:var(--sumi-soft); max-width:60ch; margin:0; }
.back{ display:inline-block; margin-top:.4rem; text-decoration:none; color:var(--sumi-soft); border-bottom:1.5px solid var(--shu); padding-bottom:1px; }
.back:hover{ color:var(--shu-deep); }

.diario-list{ list-style:none; margin:0; padding:0 0 3rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.diario-card{ display:flex; flex-direction:column; border:1px solid var(--sumi); background:var(--paper); padding:1.4rem 1.5rem; text-decoration:none; color:inherit; transition:box-shadow .2s ease; }
.diario-card:hover{ box-shadow:8px 8px 0 var(--paper-deep); }
.diario-card .tag{ font-family:var(--serif); color:var(--shu); font-size:.9rem; }
.diario-card h2{ font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:.3rem 0 .5rem; }
.diario-card p{ margin:0 0 .9rem; color:var(--sumi-soft); font-size:.98rem; line-height:1.5; }
.diario-card .more{ margin-top:auto; font-size:.95rem; border-bottom:1.5px solid var(--shu); align-self:flex-start; padding-bottom:1px; }

.article{ max-width:66ch; margin:0 auto; padding:1rem 0 3rem; }
.article p{ margin:0 0 1.2rem; }
.article h2{ font-family:var(--serif); font-weight:600; font-size:1.5rem; margin:2rem 0 .8rem; }
.article .lead{ font-family:var(--serif); font-size:1.24rem; line-height:1.55; }
.article .lead::first-letter{ font-family:var(--serif); font-weight:800; float:left; font-size:3.6rem; line-height:.72; padding:.08em .12em 0 0; color:var(--shu); }
.article em{ font-style:italic; }
.article blockquote{ margin:1.6rem 0; padding-left:1.2rem; border-left:3px solid var(--shu); font-family:var(--serif); font-size:1.15rem; color:var(--sumi-soft); }
.article .repost{ margin-top:2.4rem; padding-top:1.2rem; border-top:2px solid var(--gold); font-size:.95rem; color:var(--sumi-soft); }

.legal{ max-width:66ch; margin:0 auto; padding:1rem 0 3rem; }
.legal h2{ font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:1.8rem 0 .6rem; }
.legal p, .legal li{ color:var(--sumi-soft); }
.legal ul{ padding-left:1.2rem; }

.thanks{ min-height:56vh; display:grid; place-content:center; text-align:center; gap:1rem; padding:3rem 0; }
.thanks .seal-lg{ --seal-size:72px; margin:0 auto; }
.thanks h1{ font-family:var(--serif); font-weight:800; font-size:clamp(2rem,5vw,3rem); margin:0; }
.thanks p{ color:var(--sumi-soft); max-width:46ch; margin:0 auto; }

@media (max-width:760px){
  .diario-list{ grid-template-columns:1fr; }
}

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:60; display:none; place-items:center; background:rgba(20,16,13,.93); padding:clamp(1rem,4vw,3rem); }
.lb.on{ display:grid; }
.lb figure{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lb img{ max-width:100%; max-height:78vh; width:auto; height:auto; margin-inline:auto; border:1px solid rgba(236,227,210,.25); }
.lb figcaption{ color:var(--paper); font-family:var(--serif); margin-top:.9rem; font-size:1.05rem; }
.lb figcaption .jp{ color:var(--shu); margin-left:.6ch; }
.lb figcaption .canon{ display:block; font-style:italic; color:rgba(236,227,210,.7); font-size:.9rem; margin-top:.2rem; }
.lb figcaption .story{ display:block; font-family:var(--sans); font-weight:400; color:rgba(236,227,210,.85); font-size:.92rem; line-height:1.5; margin:.6rem auto 0; max-width:52ch; }
.lb-btn{ position:absolute; background:none; border:0; color:var(--paper); font-size:2rem; line-height:1; cursor:pointer; padding:.4rem .7rem; opacity:.75; }
.lb-btn:hover{ opacity:1; color:var(--shu); }
.lb-close{ top:.6rem; right:.8rem; }
.lb-prev{ left:.4rem; top:50%; transform:translateY(-50%); font-size:2.6rem; }
.lb-next{ right:.4rem; top:50%; transform:translateY(-50%); font-size:2.6rem; }

/* ---------- one orchestrated entrance ---------- */
@keyframes stamp{
  0%{ opacity:0; transform:scale(1.5) rotate(-8deg); }
  60%{ opacity:1; transform:scale(.92) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
.hero-art .seal-lg{ animation:stamp .6s cubic-bezier(.2,.9,.3,1) .35s both; }

/* ---------- responsive ---------- */
@media (max-width:680px){
  .lockup-text{ flex-direction:column; align-items:flex-start; gap:0; line-height:1.06; }
  .lockup .sep{ display:none; }
  .lockup .mark{ font-size:1.04rem; }
  .lockup .name{ font-size:.82rem; }
  .lockup .seal-sm{ --seal-size:36px; }
}
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:440px; }
  .hero-text .tategaki{ display:none; }
  .gallery{ column-count:2; }
  .canon-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .nav{ gap:1rem; }
}
@media (max-width:560px){
  :root{ --fs-body:1.02rem; }
  .gallery{ column-count:1; }
  .nav a:not(.nav-key){ display:none; }
  .sec-head .en{ display:none; }
  .tategaki-light{ display:none; }
  .contact .row{ flex-direction:column; gap:.1rem; }
  .contact .row .k{ width:auto; font-size:.85rem; }
  .intake{ grid-template-columns:1fr; }
  .foot small{ margin-left:0; flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}