/* ============================================================
   KIWA 際 v14.7 — /contact/ : THE MIND
   The page where an unformed thought crosses into an exact one.

   It runs entirely on home.css's tokens, glass recipe, easing and
   reveal verbs — this file only adds the crossing. Two typographic
   voices carry the concept: .ghost (serif italic, --mut) is the
   thought still drifting; em (serif italic, --shu) is the thought
   decided. Glass law holds: pressable only. Reading surfaces are
   plate, hairline, lit gradient — or the one paper object (washi).
   ============================================================ */

/* ---------- page grammar ---------- */
.head-xl{font:400 clamp(38px,6.4vw,92px)/1.02 var(--serif);letter-spacing:-.022em}
.ghost{font-family:var(--serif);font-style:italic;color:var(--mut)}
.lede{color:var(--mut);max-width:54ch;font-size:clamp(15px,1.5vw,18px);margin-top:26px}
.cpage{position:relative;overflow:clip}

/* ---------- 00 · the hero — the thought field ---------- */
/* the section rule's 19vh top belongs to ledger sections, not the opening —
   the hero measures its own space so the type can sit low against the field */
/* capped: on a tall portrait display an uncapped 100svh leaves a cavern of
   empty field above the type */
/* The type holds the top-left quadrant so the lower half of the frame — the
   figure, and the opening above it — is never covered. */
.chero{position:relative;min-height:min(100svh,1000px);display:flex;flex-direction:column;justify-content:flex-start;
  padding:0;overflow:clip}
/* ---------- the film ----------
   The seated figure with the mind opening above. Object-position keeps the
   figure planted on the lower edge (the source composition's own geometry),
   mirrored + re-graded like the homepage film so it doesn't read as its
   template. The grade darkens the LEFT COLUMN ONLY — where the type sits —
   so the centre and right of frame, which is the whole point, stay open. */
.cfilm{position:absolute;inset:0;overflow:hidden}
/* NOT mirrored: the source frames the figure on the right, which is exactly
   where this page needs them — the type owns the left, the figure is never
   covered, and the opening above their head drifts back into the headline.
   Re-graded warm: the source is a blue night, and this site has no blue in
   it. sepia carries it onto the warm ramp, saturate puts the life back, and
   the ember hue-rotate lands it beside --shu. */
.cfilm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  filter:saturate(.42) sepia(.82) saturate(1.55) hue-rotate(-8deg) contrast(1.08) brightness(.95);
  opacity:0;transition:opacity .5s ease}
.cfilm video.on{opacity:1}
/* The crossing. The film must not end on an edge — it has to arrive at the
   ledger's own black before the boundary, or the eye finds the seam. So the
   ramp runs over the bottom HALF, stays almost nothing through the face
   (~54% in), and is already solid --bg by 94% — the last stretch carries no
   contrast for a band to appear in. Many stops on purpose: a four-stop
   gradient over 500px banks visibly on a wide display. */
.cfilm .filmfade{position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(14,12,10,0) 0%,
    rgba(14,12,10,.05) 22%,
    rgba(14,12,10,.13) 38%,
    rgba(14,12,10,.26) 52%,
    rgba(14,12,10,.44) 65%,
    rgba(14,12,10,.66) 76%,
    rgba(14,12,10,.85) 86%,
    rgba(14,12,10,.96) 92%,
    var(--bg) 96%,
    var(--bg) 100%)}
.cfilm .grade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(14,12,10,.76),rgba(14,12,10,.24) 20%,transparent 42%),
  linear-gradient(96deg,rgba(14,12,10,.82) 0%,rgba(14,12,10,.44) 28%,rgba(14,12,10,.06) 52%,transparent 66%),
  radial-gradient(86% 62% at 52% 82%,transparent 42%,rgba(14,12,10,.3))}
/* The field is fixed behind the entire page, not parked in the hero. The
   film covers it up there (it paints later in DOM order); below, the ledger
   sections go transparent so the sparks keep drifting behind the reading —
   body still carries --bg, so nothing about the page's colour changes. */
#mindfield{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.cpage .ledger{background:transparent}
.chero.film-live .mf-seam{opacity:0}
#filmctl{position:absolute;right:44px;bottom:30px;z-index:3;display:none;cursor:pointer;
  font:500 12px var(--sans);color:var(--text)}
#filmctl.show{display:inline-flex}
#filmctl svg{flex:none}
#filmctl .i-play{display:none}
#filmctl.paused .i-pause{display:none}
#filmctl.paused .i-play{display:block}
html:not(.js) #filmctl{display:none}
/* the gap of light — same instrument as the homepage's, moved to where the
   field's dots stop drifting and start being placed */
.mf-seam{position:absolute;top:0;bottom:0;left:62%;width:250px;transform:translateX(-50%);pointer-events:none;
  transition:opacity .8s ease;
  background:radial-gradient(44% 56% at 50% 46%,rgba(255,179,138,.15),rgba(216,64,31,.05) 56%,transparent 80%)}
.chero-stack{position:relative;z-index:2;width:100%;padding-top:124px;max-width:1200px}
.chero-line{font:400 clamp(38px,7.4vw,108px)/.98 var(--serif);letter-spacing:-.024em;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.4)}
.chero-sub{color:var(--mut);max-width:42ch;font-size:clamp(15px,1.5vw,19px);margin-top:22px;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* the fast lane — the one control that does real work up here: it drops the
   address into the brief below and puts the cursor in the only question that
   matters. Pressable, therefore glass. */
.fastlane{display:flex;align-items:center;gap:10px;max-width:520px;margin-top:36px;
  border-radius:999px;padding:8px 8px 8px 24px;transition:box-shadow .3s ease}
.fastlane input{flex:1;min-width:0;background:none;border:none;padding:11px 0;
  color:var(--text);font:400 15.5px var(--sans)}
.fastlane input:focus{outline:none}
.fastlane ::placeholder{color:var(--mut);opacity:1}
.fastlane:focus-within{box-shadow:inset 0 0 0 1.5px var(--shu-hi),inset 0 1px 1px rgba(255,255,255,.1),0 0 24px -6px rgba(216,64,31,.7)}
.fl-go{flex:none;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--washi);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s ease,transform .3s var(--ease)}
.fl-go:hover{background:#E4DED2;transform:translateX(2px)}
.fl-go:active{transform:scale(.94)}
/* --mut, not --dim: the token law says --dim never carries a line a visitor
   has to read */
.fl-note{margin-top:16px;font:400 12px/1.8 var(--mono);letter-spacing:.05em;color:var(--mut);max-width:66ch}
.fl-note a{color:var(--mut);border-bottom:1px solid var(--hair-hi)}
.fl-note a:hover{color:var(--text);border-bottom-color:var(--shu)}
/* the studio status moved out of the hero and in beside the head, so nothing
   of the site's chrome sits over the film's lower frame */
.head-status{flex-direction:column;gap:12px;width:100%;margin-top:4px;padding-top:24px;
  border-top:1px solid var(--hair)}

/* ---------- carrying the film down the page ----------
   The opening's light is not allowed to stop at the hero's edge. It thins
   out over the first ledger section (.carry), leaves a spark trail falling
   from where the figure stood (.trail), and the scroll rail (#mprog) keeps
   the same shu→ember ramp in view the whole way down — the homepage's own
   device, so the two pages read as one site while scrolling. */
#mprog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--shu),var(--ember))}
html:not(.js) #mprog{display:none}
.carry{position:absolute;left:0;right:0;top:0;height:60vh;pointer-events:none;
  background:radial-gradient(58% 100% at 47% 0%,rgba(255,179,138,.1),rgba(216,64,31,.03) 46%,transparent 74%)}
.trail{position:absolute;top:-14vh;left:47%;transform:translateX(-50%);width:1px;height:32vh;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,205,166,.55),rgba(216,64,31,.16) 42%,transparent)}
.trail::after{content:"";position:absolute;top:0;left:50%;width:120px;height:120px;transform:translate(-50%,-46%);
  border-radius:50%;background:radial-gradient(circle,rgba(255,179,138,.16),transparent 68%)}
/* fainter each section down — the light is leaving, not switched off */
.carry.soft{height:40vh;background:radial-gradient(52% 100% at 47% 0%,rgba(255,179,138,.055),transparent 70%)}
.carry.faint{height:34vh;background:radial-gradient(50% 100% at 50% 0%,rgba(255,179,138,.035),transparent 70%)}

/* ---------- 01 · the premise ---------- */
.premise .head-xl{margin-top:8px;max-width:17ch}

/* ---------- 02 · the crossing (the page's statement piece) ----------
   Left of the seam: the thought as it arrives — twelve strokes drawn by
   hand, none of them straight. Right of it: the same mass, ruled.
   The site's two verbs, side by side, with 際 in between. */
.crosspanel{position:relative;margin-top:8vh;border-radius:34px;overflow:hidden;
  aspect-ratio:16/9;min-height:360px;
  border:1px solid var(--hair);background:linear-gradient(168deg,var(--plate),#100E0C)}
.cp-art{position:absolute;inset:0;width:100%;height:100%}
/* the gap of light: a soft bloom with one exact hairline down it —
   the whole studio in two gradients */
.cp-seam{position:absolute;top:0;bottom:0;left:50%;width:300px;transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(22% 40% at 50% 48%,rgba(255,222,196,.15),transparent 74%),
    radial-gradient(50% 62% at 50% 48%,rgba(255,179,138,.09),rgba(216,64,31,.03) 60%,transparent 84%);
  }
.cp-seam::after{content:"";position:absolute;top:12%;bottom:12%;left:50%;width:1px;transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,rgba(255,205,166,.42) 26%,rgba(255,205,166,.42) 74%,transparent)}
html.js .cp-seam{opacity:.3;transition:opacity 1.2s ease .5s}
html.js .crosspanel.in .cp-seam{opacity:1}
.cp-tags{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  padding:26px clamp(20px,3vw,34px);font:400 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.cp-tags b{color:var(--shu-hi);font-weight:400}
/* lit, not glass — a reading surface never gets a pane */
.cp-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;padding:clamp(22px,3vw,34px);
  background:linear-gradient(to top,rgba(9,7,6,.9),rgba(9,7,6,.6) 44%,transparent)}
.cp-note{max-width:48ch}
.cp-note p:not(.ex-kicker){font-size:clamp(13.5px,1.25vw,16px);line-height:1.62;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.cp-foot .pill{flex:none}

/* The drawing is authored FINISHED; only the JS tier hides it to draw it.
   Without JS — and under reduced motion — there is nothing to undo, so the
   panel can never be left half-drawn. (Same contract as home.css's .rv.) */
.cp-scrawl path{fill:none;stroke:var(--mut);stroke-width:1.3;stroke-linecap:round;opacity:.58}
html.js .cp-scrawl path{stroke-dasharray:1;stroke-dashoffset:1}
html.js .crosspanel.in .cp-scrawl path{animation:cpDraw 1.9s var(--ease) var(--d,0s) forwards}
@keyframes cpDraw{to{stroke-dashoffset:0}}
html.js .cp-wire>*{opacity:0;transition:opacity .8s var(--ease) var(--d,0s)}
html.js .crosspanel.in .cp-wire>*{opacity:1}
html.js body.static .cp-scrawl path{stroke-dashoffset:0}
html.js body.static .cp-wire>*{opacity:1}
body.static .cp-seam{opacity:1}

/* ---------- 03 · the brief ---------- */
.brief-grid{display:grid;grid-template-columns:minmax(260px,.82fr) 1.18fr;gap:6vw;margin-top:9vh}
.head-col{position:sticky;top:118px;align-self:start;display:flex;flex-direction:column;align-items:center;gap:30px}

/* THE HEAD — KIWA's own robot, hand-drawn SVG. Eyes/head/brows/smile are
   rigged in contact.js: they track the cursor, blink, listen when the form
   is focused, and celebrate on send. Magnet drift on top. */
.head-halo{position:relative;display:flex;align-items:center;justify-content:center}
.head-halo::before{content:"";position:absolute;width:132%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,179,138,.14),rgba(255,179,138,.04) 46%,transparent 68%)}
.magnet{position:relative;will-change:transform;transition:transform .6s ease-in-out}
.magnet svg{width:min(30vw,340px);height:auto;display:block;overflow:visible}
#face-head{transform-origin:100px 112px;transition:none}
.f-lid{transform-origin:center 88px;transform:scaleY(0);transition:transform .09s ease}
.face-blink .f-lid{transform:scaleY(1)}
.f-cheek{opacity:0;transition:opacity .4s ease}
@keyframes faceBounce{0%{transform:translateY(0)}30%{transform:translateY(-14px)}55%{transform:translateY(2px)}75%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.face-party #face-head{animation:faceBounce .9s var(--ease)}
@media (prefers-reduced-motion:reduce){.face-party #face-head{animation:none}}

/* the shaping meter — five answers, five marks. The thought taking shape,
   measured. 跡: a mark, once made, stays. */
.shaping{width:min(100%,300px)}
.shape-bars{display:flex;gap:6px}
.shape-bars i{flex:1;height:2px;background:var(--hair-hi);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.shape-bars i.on{background:var(--shu);box-shadow:0 0 10px rgba(216,64,31,.6)}
.shape-cap{margin-top:14px;text-align:center;font:400 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.shape-cap b{color:var(--shu-hi);font-weight:400}
.head-col .b-kicker{text-align:center;margin-bottom:0;max-width:26ch}

/* the questions */
.cform{max-width:660px}
.frow{padding:30px 0;border-top:1px solid var(--hair)}
.frow:first-of-type{padding-top:0;border-top:none}
.q{display:block;font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.q .n{color:var(--shu-hi);margin-right:14px}
.q em{text-transform:none;letter-spacing:0;font-size:14px;color:var(--shu-hi)}
.cform input[type="text"],.cform input[type="email"],.cform textarea{width:100%;background:none;border:none;
  border-bottom:1px solid var(--hair-hi);color:var(--text);font:400 17px var(--sans);padding:10px 0;border-radius:0;
  transition:border-color .3s ease}
.cform textarea{min-height:104px;resize:vertical;line-height:1.6}
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--shu);box-shadow:0 1px 0 0 var(--shu)}
.cform ::placeholder{color:var(--dim);opacity:1;font-size:15px}
.bands-set{border:none}
.bands{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.band{border-radius:999px;padding:9px 18px;font:400 13px var(--sans);color:var(--mut);cursor:pointer;
  transition:color .3s ease,background .3s ease}
.band:hover{background:rgba(255,255,255,.06)}
.band input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.band:has(input:checked){color:var(--text);box-shadow:inset 0 1px 1px rgba(255,255,255,.1),inset 0 0 0 1px var(--shu)}
.band:has(input:focus-visible){outline:2px solid var(--text);outline-offset:3px}
.band input:checked~span{color:var(--text)}
.band input:focus-visible~span{outline:2px solid var(--text);outline-offset:6px;border-radius:4px}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:34px;border-top:1px solid var(--hair)}
.form-status{margin-top:20px;font:400 13px/1.7 var(--mono);letter-spacing:.04em;opacity:0;transition:opacity .4s ease}
.form-status.show{opacity:1}
.form-status.ok{color:var(--shu-hi)}
.form-status.err{color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formnote{margin-top:34px;font:400 12px/1.9 var(--mono);letter-spacing:.05em;color:var(--mut)}
.formnote a{color:var(--mut);border-bottom:1px solid var(--hair-hi)}
.formnote a:hover{color:var(--text)}
/* without JS the mailto ritual can't run — offer the address, not a dead form */
html:not(.js) .cform,html:not(.js) .shaping,html:not(.js) .fastlane{display:none}
.nojs-note{display:none;font:400 14px/1.9 var(--sans);color:var(--mut)}
html:not(.js) .nojs-note{display:block}

/* ---------- 04 · what comes back ---------- */
.after-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:8vh;align-items:start}
.sheet-frame{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;
  border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;padding:clamp(18px,3vw,44px);
  background:radial-gradient(88% 74% at 50% 16%,rgba(255,179,138,.1),transparent 68%),var(--plate)}
/* the one paper object — the charter's washi sheet, holding the thing you sent
   after we've been at it */
.sheet{width:min(100%,400px);background:var(--washi);color:var(--ink);border-radius:3px;
  padding:clamp(18px,2.4vw,28px);transform:rotate(-1.4deg);
  box-shadow:0 44px 84px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.6)}
.sh-top{display:flex;justify-content:space-between;gap:12px;font:400 9px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(26,23,20,.66)}
.sh-top s{color:#8C3E28;text-decoration:line-through}
.sh-scrawl{display:block;width:100%;height:auto;margin:14px 0 18px}
.sh-scrawl path{fill:none;stroke:rgba(26,23,20,.34);stroke-width:1.5;stroke-linecap:round}
.sh-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
  border-top:1px solid rgba(26,23,20,.14);font-size:12.5px}
.sh-line b{font-weight:500;letter-spacing:.02em}
.sh-line span{color:rgba(26,23,20,.68);text-align:right}
.sh-sign{margin-top:16px;font:400 9px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(26,23,20,.62)}
.after-col{display:flex;flex-direction:column}
.ablock{padding:34px 0;border-top:1px solid var(--hair)}
.ablock:first-child{padding-top:0;border-top:none}
.ablock h3{font:400 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--shu-hi);margin-bottom:14px}
.ablock p{color:var(--mut);font-size:clamp(15px,1.4vw,17.5px);line-height:1.66;max-width:46ch}

/* ---------- 05 · the close ---------- */
.close-arrive{min-height:70vh}
.close-arrive h2{font:400 clamp(38px,6vw,84px)/1.03 var(--serif);letter-spacing:-.018em;margin-bottom:22px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .brief-grid{grid-template-columns:1fr;gap:7vh}
  .head-col{position:static;order:-1;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:24px 34px}
  .head-col .shaping{flex:1 1 260px}
  .magnet svg{width:min(42vw,240px)}
  .after-grid{grid-template-columns:1fr;gap:6vh}
  .sheet-frame{aspect-ratio:16/11}
}
@media (max-width:760px){
  /* the film never loads at this width — the thought-field is the hero */
  .chero{min-height:auto;padding-bottom:14vh}
  .chero-stack{padding-top:118px}
  #filmctl{right:22px}
  .crosspanel{aspect-ratio:4/5;min-height:0;border-radius:24px}
  .cp-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .cp-tags{padding:20px}
  .mf-seam{left:52%;width:180px}
  .sheet-frame{aspect-ratio:auto;padding:26px 20px;border-radius:22px}
  .sheet{transform:none}
  .frow{padding:24px 0}
}
@media (max-width:420px){
  .fastlane{padding-left:18px}
  .fl-go{width:40px;height:40px}
}

/* reduced motion / static tier — the magnet and the field hold still,
   everything else is a finished document */
body.static .magnet{transform:none !important}
body.static .head-halo::before{opacity:.7}