/* ============================================================
   SHIHO MORIYA - draft stylesheet
   Monochrome, editorial, geometric sans / airy letter-spacing
   ============================================================ */

:root {
  --ink: #1c1c1c;
  --ink-soft: #3a3a3a;
  --muted: #6b6b6b;
  --line: #d9d6d2;
  --line-dark: #9a9a9a;
  --bg: #ffffff;
  --bg-soft: #f4f3f1;
  --bg-softer: #faf9f8;
  /* The Japanese faces sit at the end of each stack, after every Latin one.
     A font is chosen per character, so Latin letters still come from Century
     Gothic and Georgia exactly as before, and only the Japanese characters
     reach these. Without them the browser picks whatever it likes for
     Japanese, which on Windows means a face that does not match the rest of
     the page. Mincho is paired with Georgia because both are serifs; the
     gothic faces answer to Century Gothic. */
  --sans: "Century Gothic", "CenturyGothic", Futura, "Avenir Next", "Trebuchet MS",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
    Meiryo, sans-serif;
  --serif: Georgia, "Times New Roman",
    "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* The phone rules below ask how wide THIS column is, not how wide the browser
   window is. That is the whole point.
   `@media (max-width: 860px)` measures the window, so the editor's MOBILE
   button, which narrows main to 402px and leaves the window at laptop width,
   switched none of them on: Shiho's preview rendered the desktop layout
   squeezed, and she reported the same phone bugs repeatedly because the site
   was fixed and the preview was not. A container query measures main itself,
   so a real 390px phone and a 402px preview both match, from one set of rules
   that cannot drift apart.
   Safe because nothing position: fixed lives inside main. Every editor panel,
   toolbar and menu is appended to document.body. */
main { container-type: inline-size; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

h1, h2, h3 {
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
}

.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}

.rule {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--line-dark);
  margin: 22px 0 26px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 14px 38px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  text-align: center;
}

.btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn.solid { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn.solid:hover { background: #000; }

.btn.full { display: block; width: 100%; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 34px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #eceae7;
}

.main-nav { display: flex; gap: 34px; }

.main-nav a {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.main-nav a:hover, .main-nav a.active { border-color: var(--ink); }

.logo {
  font-size: 21px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  text-indent: .38em; /* optically recentre the tracked-out text */
}

.header-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.header-icons a { position: relative; display: inline-flex; color: var(--ink); }

.header-icons svg { width: 19px; height: 19px; }

.cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 26px;
  height: 20px;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
}

.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 18px; }

/* ---------- home hero ---------- */

.hero { position: relative; }

/* The hero used to be a fixed 640px tall strip at whatever width the screen
   happened to be, filled with object-fit: cover. That made the visible crop a
   function of monitor width: on a 1440px laptop the box was 2.25:1 and the
   whole photo showed, on a 2560px monitor it became 4:1 and the ocean and the
   lower tentacles were cut away. Height is now driven by the photo's own
   shape, so the same picture is seen on every screen, phones included.

   It stays edge to edge. A max-width here centred the hero inside white
   margins while the product rows below it still ran to both edges, and a
   half-inset page reads as broken rather than deliberate. Shiho's call: no
   gaps anywhere, so a wide monitor gets a taller hero instead. */
.hero img,
.hero video {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0a0a;
}

/* ---------- feature rows (home + products) ---------- */

.feature {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: stretch;
  background: var(--bg-softer);
}

.feature.reverse { grid-template-columns: 45% 55%; background: var(--bg); }

/* A nudge must move a photo inside its own cell, never make the page wider.
   Shiho dragged the RAN photo 4.17% right while it was 100% wide, which pushed
   it 33px past the right edge of the page at every screen size. html carries
   overflow-x: clip so nobody could scroll to it, but the photo was still being
   cropped off-screen rather than shifted within its frame, which is what a
   nudge is supposed to do. */
.feature-media { min-width: 0; overflow: hidden; }

.feature-media img { width: 100%; height: 100%; object-fit: cover; }

.feature-text { padding: 90px 10%; align-self: center; }

/* reversed row (e.g. OCTAVE on Products): pull the text in from the left edge */
.feature.reverse .feature-text { order: -1; padding: 90px 8% 90px 16%; }

.feature-text h2 { font-size: 34px; letter-spacing: .3em; }

.feature-text p { max-width: 380px; color: var(--ink-soft); }

.feature-text .btn { margin-top: 34px; }

/* ---------- home designer block ---------- */

.designer {
  display: grid;
  /* image owns the left 55%; the text block sits centred in the remaining 45%
     (Shiho: previous 47/53 split put both image edge and text too far left) */
  grid-template-columns: 55% 45%;
  align-items: stretch;
  border-top: 1px solid #eceae7;
}

/* Same reason as .feature-media: a nudge stays inside its cell. */
.designer-media { min-width: 0; overflow: hidden; }

.designer-media img { width: 100%; height: 100%; object-fit: cover; }

.designer-text { padding: 90px 9% 90px 15%; background: var(--bg-softer); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

.designer-text h2 { font-size: 26px; letter-spacing: .22em; margin-bottom: 24px; }

.designer-text p { max-width: 420px; }

.designer-text .btn { margin-top: 32px; align-self: flex-start; }

/* ---------- canvas sections ----------
   A section Shiho lays out herself. 24 columns on a computer, 8 on a phone,
   with each block's cell reference carried in custom properties so the same
   rule serves every block. Rows are a fixed height, so a block's height means
   the same thing wherever it sits. */

.ed-canvas { padding: 40px 0; }

.ed-canvas-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 32px;
  gap: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: stretch;
}

/* A block with no saved placement still has to appear somewhere sensible
   rather than collapsing into the first cell. */
.ed-cblock {
  grid-column: var(--gc, 1) / span var(--gw, 12);
  grid-row: var(--gr, 1) / span var(--gh, 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
}

.ed-cblock-image { padding: 0; }
.ed-cblock-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-ctext { font-size: 15px; line-height: 1.7; }
.ed-cblock-button { align-items: flex-start; justify-content: center; }
.ed-cblock-button .btn { display: inline-block; }
.ed-cline { display: block; width: 100%; height: 1px; background: var(--line-dark); }
.ed-cspacer { display: block; }
.ed-cquote { border: 0; margin: 0; }
.ed-cquote p { font-size: 21px; line-height: 1.55; color: var(--ink); letter-spacing: .02em; }
.ed-cquote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}

/* Container, not media. The .ed- prefix made this look like editor chrome in
   the container-query pass and it was skipped; it is not. Canvas blocks are
   content Shiho adds, and visitors see them, so the phone grid has to follow
   main like every other phone rule. On @media it left her preview showing a
   24-column desktop grid at phone width: the first canvas block she published
   made the page 3018px tall in the preview against 2882px on a real phone. */
@container (max-width: 860px) {
  .ed-canvas { padding: 24px 0; }
  .ed-canvas-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 30px;
    padding: 0 24px;
  }
  /* the phone has its own placement for every block; falling back to the
     desktop one would put a 24-wide block on an 8-wide grid */
  .ed-cblock {
    grid-column: var(--mc, 1) / span var(--mw, 8);
    grid-row: var(--mr, 1) / span var(--mh, 4);
  }
  .ed-cquote p { font-size: 18px; }
}

/* ---------- closing showcase (home) ----------
   One photograph, the piece named underneath, and a link across from the name.
   Sits last on the home page, above the footer. */

.showcase { padding: 96px 0 52px; background: var(--bg-softer); }

.showcase-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

.showcase-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.showcase-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  max-width: 1180px;
  margin: 30px auto 0;
  padding: 0 40px;
}

.showcase-name h2 { font-size: 38px; letter-spacing: .16em; line-height: 1.1; }

.showcase-name p { margin-top: 10px; color: var(--muted); font-size: 14px; }

.showcase-link {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
  white-space: nowrap;
}
.showcase-link:hover { border-color: var(--ink); }

/* The arrow is part of the label, not a sibling of it. Removing the words in
   the editor used to leave the arrow floating on the page by itself; drawn
   this way it goes when the words go. */
.showcase-link-text::after {
  content: "";
  display: inline-block;
  width: 34px; height: 10px;
  margin-left: 14px;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5h31M27 1l5 4-5 4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M0 5h31M27 1l5 4-5 4' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

@container (max-width: 860px) {
  .showcase { padding: 60px 0 32px; }
  /* Shiho asked for the photograph to reach both edges on a phone, like the
     product rows above it. The 24px side padding left it floating in a margin
     that nothing else on the page had. The words below keep their padding. */
  .showcase-media { padding: 0; gap: 8px; }
  .showcase-media { grid-template-columns: 1fr; }
  .showcase-foot {
    flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 0 24px; margin-top: 24px;
  }
  .showcase-name h2 { font-size: 28px; }
}

/* ---------- page banner (products) ---------- */

.page-banner {
  position: relative;
  padding: 74px 0 58px;
  background: #f1f0ee center / cover no-repeat;
}

.page-banner h1 { font-size: 46px; letter-spacing: .3em; }

.page-banner p { margin-top: 12px; color: var(--ink-soft); }

/* ---------- coming next (products) ---------- */

.coming-next {
  position: relative;
  background: var(--bg-soft);
  text-align: center;
  padding: 100px 40px 110px;
  overflow: hidden;
}

/* Background photo Shiho can click and replace. It sits behind a soft wash so
   the text stays readable whatever she chooses. */
.coming-next-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.coming-next::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(244, 243, 241, .82);
  z-index: 1;
  pointer-events: none;
}
/* The wash is pointer-events:none and the inner block only covers its own
   text, so the photo is still clickable in the padding around it. */
.coming-next-inner { position: relative; z-index: 2; }

.coming-next h2 { font-size: 30px; letter-spacing: .3em; }

.coming-next .rule { margin: 26px auto 34px; }

.coming-next p { max-width: 560px; margin: 0 auto; }

.coming-next .sub { margin-top: 46px; }

.newsletter-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 26px;
}

.newsletter-inline input {
  width: min(420px, 60vw);
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .05em;
  padding: 12px 4px;
  outline: none;
}

.newsletter-inline button { margin-left: 26px; align-self: center; }

/* ---------- about page ---------- */

.about-intro {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: stretch;
  background: var(--bg-softer);
}

.about-intro-text { padding: 90px 0; align-self: center; justify-self: center; max-width: 440px; }

.about-intro-text h1 { font-size: 38px; letter-spacing: .22em; margin-bottom: 34px; }

.about-intro-text p { max-width: 100%; margin-bottom: 24px; }

.about-intro-media img { width: 100%; height: 100%; object-fit: cover; }

/* Two columns and two rows: the heading alone on the first row, the
   photographs and the paragraphs side by side on the second. That is what
   makes the pictures start level with the words no matter how tall the
   heading is.

   It used to be one row with the images pushed down a flat 140px, measured
   against the two-line English heading. The Japanese heading is one line, so
   the same 140px left the photographs sitting 42px below the paragraph they
   were supposed to line up with. */
.form-study {
  display: grid;
  grid-template-columns: 48% 52%;
  column-gap: 60px;
  row-gap: 0;
  padding: 100px 40px;
  max-width: 1240px;
  margin: 0 auto;
}

.fs-heading { grid-column: 2; grid-row: 1; }

.fs-grid {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 24px;
  align-content: start;
  /* Shiho's nudge, kept: the pictures sit a little under the first line of
     text rather than dead level with it. Measured from the paragraph now, not
     from the top of the section, so it holds in any language. */
  margin-top: 22px;
}

.fs-text { grid-column: 2; grid-row: 2; }

.fs-grid figure { margin: 0; }

.fs-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.fs-grid figcaption {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.fs-heading { font-size: 32px; letter-spacing: .22em; margin-bottom: 34px; }

.fs-text p { margin-bottom: 22px; max-width: 540px; }

.about-banner {
  position: relative;
  background: #f7f6f4;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  overflow: hidden;
}

/* Background is a real, editor-replaceable image (banner.image in about.md);
   the old CSS-only ribbon pseudo-elements could not be edited from the site. */
.about-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-banner-inner { position: relative; z-index: 1; max-width: 560px; }

.about-banner-inner h2 { font-size: 34px; letter-spacing: .12em; line-height: 1.35; }

.about-banner-inner .rule { margin: 20px auto 22px; }

.about-banner-inner p { max-width: 360px; margin: 0 auto; color: var(--ink-soft); }

/* ---------- product page ---------- */

.product-top {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 40px 70px;
}

.gallery-main { position: relative; background: var(--bg-soft); }

.gallery-main img { width: 100%; aspect-ratio: 605 / 750; object-fit: cover; }

.g-prev, .g-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 30px;
  font-weight: 300;
  color: var(--ink);
  padding: 10px 14px;
  line-height: 1;
}

.g-prev { left: 4px; }
.g-next { right: 4px; }

.g-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.g-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0;
}

.g-dots button.active { background: var(--ink); }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.gallery-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: pointer;
  opacity: .85;
  border: 1px solid transparent;
  transition: opacity .2s ease;
}

.gallery-thumbs img:hover { opacity: 1; }

.gallery-thumbs img.active { opacity: 1; border-color: var(--ink); }

.crumbs {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.crumbs a:hover { color: var(--ink); }

.product-info h1 { font-size: 36px; letter-spacing: .3em; margin-bottom: 10px; }

.price { font-size: 16px; color: var(--ink); letter-spacing: .06em; margin-bottom: 26px; }

.add-to-cart { width: 100%; padding: 17px; font-size: 12px; }

.status-label { margin: 26px 0 10px; font-size: 13px; color: var(--ink); }

.status-box {
  border: 1px solid var(--ink);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 34px;
}

/* accordions */

.acc { border-top: 1px solid var(--line); }

.acc:last-child { border-bottom: 1px solid var(--line); }

.acc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 2px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}

.acc-head::after { content: "+"; font-size: 17px; font-weight: 300; }

.acc.open .acc-head::after { content: "\2212"; }

.acc-body { display: none; padding: 0 2px 22px; font-size: 14px; }

.acc.open .acc-body { display: block; }

.acc-body ul { list-style: none; }

.acc-body ul li { padding-left: 16px; position: relative; }

.acc-body ul li::before { content: "\2022"; position: absolute; left: 2px; }

/* notice + shipping */

/* Bottom padding halved, 80px to 40px. Shiho has hidden all six notice photos,
   so the grid below the paragraph is empty and the section closed on 120px of
   nothing: 40px of grid margin plus 80px of padding. See .notice-grid, whose
   top margin is halved to match. Together they take the gap to 60px. */
.notice-section { background: var(--bg-softer); padding: 70px 0 40px; border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.section-head h2 { font-size: 20px; letter-spacing: .24em; }

.section-head::after { content: "\2212"; font-size: 20px; font-weight: 300; color: var(--ink); }

.collapsible.collapsed .section-head { margin-bottom: 0; }

.collapsible.collapsed .section-head::after { content: "+"; }

.collapsible.collapsed .collapse-body { display: none; }

.notice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  /* 40px until the photos above it were hidden. An empty grid still carries its
     own margin, so this was half of the gap Shiho reported under MATERIAL
     CHARACTER. If she ever brings the photos back this is the number to put
     back to 40, along with the section's bottom padding. */
  margin-top: 20px;
}

.notice-grid img { width: 100%; aspect-ratio: 3 / 1.65; object-fit: cover; }

.shipping-section { padding: 70px 0 80px; }

.shipping-section p { margin-bottom: 14px; max-width: 900px; }

.shipping-section .strong { letter-spacing: .12em; color: var(--ink); }

/* three feature columns */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: var(--bg-softer);
}

.pillar {
  padding: 56px 40px;
  text-align: center;
  border-left: 1px solid var(--line);
}

.pillar:first-child { border-left: 0; }

.pillar svg { width: 34px; height: 34px; margin: 0 auto 20px; stroke: var(--ink); fill: none; stroke-width: 1.2; }

.pillar h3 { font-size: 14px; letter-spacing: .26em; margin-bottom: 12px; }

.pillar p { font-size: 13.5px; max-width: 260px; margin: 0 auto; }

/* ---------- contact page ---------- */
/* Shiho: a wide, short photo across the whole top, then the form centred
   underneath (previously photo right / form left in two columns). */

.contact-banner { background: var(--bg-soft); }

/* Same rule as the hero: the height followed the viewport (18vw), so the crop
   tightened as the monitor got wider. The photo now keeps its own shape, and
   like the hero it runs edge to edge rather than sitting in white margins. */
.contact-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-top { display: block; }

.contact-form-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 24px 70px;
}

.contact-form-wrap h1 { font-size: 34px; letter-spacing: .26em; margin-bottom: 14px; text-align: center; }

.contact-form-wrap .lede { margin-bottom: 36px; text-align: center; }

.contact-form-wrap .form-note { text-align: center; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-dark);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 12px;
  outline: none;
  color: var(--ink);
}

.field textarea { min-height: 110px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }

.form-note { font-size: 13px; color: var(--muted); margin-top: 20px; }

.form-success {
  border: 1px solid var(--ink);
  padding: 16px 20px;
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink);
}

.form-error {
  margin-top: 14px;
  font-size: 13px;
  color: #a3352b;
}

/* honeypot: hidden from people, visible to bots */
.field.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[type="submit"][disabled] { opacity: .55; cursor: default; }

/* policy sections */

.policies { padding: 30px 0 10px; }

.policy { border-top: 1px solid var(--line); padding: 34px 0; }

.policy:first-child { border-top: 0; }

.policy .acc-head { padding: 0 2px 0 0; font-size: 19px; letter-spacing: .22em; }

.policy .acc-body { padding-top: 26px; }

.policy p { margin-bottom: 14px; max-width: 980px; }

.faq-row {
  display: grid;
  grid-template-columns: 34% 66%;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px solid #e8e6e2;
  font-size: 13.5px;
}

.faq-row:last-child { border-bottom: 0; }

.faq-row dt { color: var(--ink); }

.faq-row dd { margin: 0; }

.newsletter-band {
  background: var(--bg-soft);
  padding: 64px 0;
}

.newsletter-band .band-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.newsletter-band h2 { font-size: 26px; letter-spacing: .26em; margin-bottom: 10px; }

.newsletter-band form { display: flex; }

.newsletter-band input {
  width: min(340px, 60vw);
  border: 1px solid var(--line-dark);
  border-right: 0;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 13px 16px;
  outline: none;
}

.newsletter-band button { padding: 13px 30px; }

/* ---------- sign-in page ---------- */

.signin-page {
  display: flex;
  justify-content: center;
  padding: 0;
}

.signin-box {
  width: min(560px, 92vw);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 60px 70px 120px;
  text-align: center;
}

.signin-box h1 {
  font-size: 19px;
  letter-spacing: .24em;
  margin-bottom: 46px;
}

.signin-field { text-align: left; margin-bottom: 18px; }

.signin-field .labels {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: .04em;
}

.signin-field input {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 3px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
}

.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 3px;
  border-color: var(--line-dark);
}

.btn.google:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--ink); }

.btn.google svg { width: 17px; height: 17px; }

.create-link {
  display: inline-block;
  margin-top: 30px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signin-msg {
  margin-top: 26px;
  font-size: 13px;
  border: 1px solid var(--ink);
  padding: 12px 16px;
  color: var(--ink);
}

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-softer); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.2fr 1fr;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px 46px;
}

.footer-col { padding: 0 34px; border-left: 1px solid var(--line); }

.footer-col:first-child { border-left: 0; padding-left: 0; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}

.footer-col p { font-family: var(--serif); font-size: 13.5px; margin-bottom: 16px; }

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 8px; }

.footer-col ul a {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink-soft);
}

.footer-col ul a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-contact {
  display: inline-block;
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}

.footer-contact:hover { border-color: var(--ink); }

.footer-news { display: flex; flex-wrap: wrap; margin-top: 4px; }

.footer-news input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-right: 0;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  padding: 9px 12px;
  outline: none;
}

.footer-news button {
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 9px 16px;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 22px 0;
}

/* ---------- cart drawer ---------- */

.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, .4);
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.cart-drawer-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 90vw);
  background: #fff;
  z-index: 121;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 44px rgba(0, 0, 0, .14);
}

.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.cart-drawer-head h2 { font-size: 13px; letter-spacing: .24em; }

.cart-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink); padding: 0 4px; }

.cart-items { flex: 1; overflow-y: auto; padding: 4px 24px; }

.cart-empty { padding: 48px 0; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: .04em; }

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item .ci-name { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }

.cart-item .ci-price { font-size: 13px; color: var(--ink-soft); margin-top: 5px; }

.cart-item .ci-remove {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
}

.cart-item .ci-remove:hover { color: var(--ink); }

.cart-foot { padding: 20px 24px 28px; border-top: 1px solid var(--line); }

.cart-foot:empty { display: none; }

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}

.cart-note { font-size: 11.5px; color: var(--muted); margin-top: 12px; text-align: center; letter-spacing: .04em; }

.ci-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
}

.ci-step {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-dark);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ci-step:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }

.ci-step:disabled { opacity: .3; cursor: default; }

.ci-step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.ci-qty {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink);
}

.ci-limit { margin-top: 7px; font-size: 11px; color: var(--muted); }

.news-note {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: .03em;
}

.news-note.error { color: #a3352b; }

/* ---------- editor: publish note ---------- */

.ed-note-label {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

.ed-note-hint { text-transform: none; letter-spacing: .02em; color: var(--muted); }

.ed-note-input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.ed-note-input:focus { border-color: var(--ink); }

.ed-note-count { margin-top: 5px; font-size: 11px; color: var(--muted); text-align: right; }

/* ---------- editor: did it actually go live ---------- */

.ed-deploy {
  margin-top: 10px; padding: 9px 12px; border: 1px solid var(--line);
  background: var(--bg-soft); font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.ed-deploy.ok { color: var(--ink); border-color: currentColor; }
.ed-deploy.warn { color: var(--ink); border-left: 3px solid currentColor; }

/* ---------- editor: failure details ---------- */

.ed-diag { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.ed-diag summary {
  cursor: pointer; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.ed-diag-pre {
  margin-top: 10px; padding: 10px 12px; background: var(--bg-soft);
  border: 1px solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; user-select: all;
}

/* Both forms are flex rows, so the note has to claim a row of its own.
   width: 100% alone did not do that. A flex item still shrinks below its width
   by default, and on Products the note is a <p> inside .coming-next, so it also
   inherited that section's 560px cap. The result after subscribing was the
   field, the button and the message strung across one line, the field pushed
   far left and the message far right. flex: 0 0 100% makes it a row, and
   max-width: none stops the inherited cap shrinking it back onto the line. */
.footer-news .news-note,
.newsletter-inline .news-note { flex: 0 0 100%; width: 100%; max-width: none; }

.newsletter-inline .news-note { text-align: center; margin-top: 16px; }

.cart-country-label {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

/* For Japan the yen is the subtotal and this is the dollar equivalent beneath
   it. Quiet on purpose: it is the reference figure, not the price being paid.
   It sat the other way round at first and Shiho read straight past the yen. */
.cart-subtotal-alt {
  margin: -6px 0 4px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: right;
}

/* Newsletter opt-in in the cart. Sentence case and quiet on purpose: it is an
   offer beside the checkout button, not a step in front of it. */
.cart-optin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}

.cart-optin input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--ink);
  width: 14px;
  height: 14px;
}

.cart-country {
  width: 100%;
  border: 1px solid var(--line-dark);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 11px;
  margin-bottom: 16px;
  outline: none;
  color: var(--ink);
}

.cart-country:focus { border-color: var(--ink); }

.cart-error {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #a3352b;
  text-align: center;
}

/* ---------- checkout result pages ---------- */

.checkout-result {
  max-width: 620px;
  margin: 0 auto;
  padding: 110px 40px 130px;
  text-align: center;
}

.checkout-result h1 { font-size: 30px; letter-spacing: .3em; }

.checkout-result .rule { margin: 26px auto 34px; }

.checkout-result p { margin-bottom: 16px; }

.checkout-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

@container (max-width: 600px) {
  .checkout-result { padding: 70px 26px 90px; }
  .checkout-result h1 { font-size: 23px; }
}

/* ---------- edit mode ---------- */

.edit-toggle {
  background: none;
  border: 0;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.edit-toggle:hover { border-color: var(--ink); }

body.editing .edit-toggle { border-color: var(--ink); }

/* ---------- language and currency pickers ----------

   Drop-downs rather than a pair of words. Both list every choice with the
   current one ticked: a control showing a single word can only tell you where
   it would take you, never what you have got, and for a price that is exactly
   backwards.

   Square, hairline, small capitals. The reference Shiho sent was a rounded
   card with a globe on it, which is the shape of the tool it was drawn in
   rather than the shape of this site; what she was pointing at was the
   behaviour, so that is what was taken from it. */
.picker { position: relative; display: inline-block; }

.picker-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.picker-button:hover,
.picker-button[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }

/* A chevron, drawn rather than fetched, and pointing at where the panel will
   appear: down in the header, up in the footer. */
.picker-caret {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.picker-button[aria-expanded="true"] .picker-caret { transform: translateY(1px) rotate(-135deg); }

.footer-prefs .picker-caret { transform: translateY(1px) rotate(-135deg); }
.footer-prefs .picker-button[aria-expanded="true"] .picker-caret { transform: translateY(-2px) rotate(45deg); }

.picker-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 70;
  min-width: 132px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
}

/* The footer sits at the bottom of the page, so its panel opens upwards. */
.footer-prefs .picker-menu { top: auto; bottom: calc(100% + 10px); }

.picker-menu[hidden] { display: none; }

.picker-menu a,
.picker-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  text-align: left;
  color: var(--muted);
}

.picker-menu > :last-child { border-bottom: 0; }

.picker-menu a:hover,
.picker-menu button:hover { background: var(--bg-soft); color: var(--ink); }

.picker-menu a.on,
.picker-menu button.on { color: var(--ink); }

/* The tick on the chosen one. Drawn in CSS so the row stays one element and
   nothing shifts when the choice moves. */
.picker-menu a.on::after,
.picker-menu button.on::after {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

/* Japanese has no capitals to space out, and the tracking that suits English
   small caps pulls kana apart instead. */
.picker-menu a[lang="ja"], .picker-value:lang(ja) { letter-spacing: .04em; }

.header-pickers { display: inline-flex; align-items: center; gap: 22px; }

/* Both header panels hang from the right edge of their button. These sit at
   the end of the header row, hard against the margin, so a panel anchored to
   the left edge runs off the side of the window: the currency one overflowed
   by 39px at 1440 and took its own tick with it. */
.header-pickers .picker-menu { left: auto; right: -18px; }

@media (max-width: 860px) {
  .header-pickers { display: none; }
}

/* ---------- footer language and currency ---------- */

.footer-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
  padding: 0 5% 34px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.pref { display: flex; align-items: center; gap: 18px; }

.pref-label {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 700px) {
  .footer-prefs {
    flex-direction: column;
    gap: 16px;
    padding: 0 7% 28px;
  }

  /* Label left, control right, so the two rows line up as a pair. */
  .pref { justify-content: space-between; }

  /* And the panel hangs from the right edge rather than the left, because at
     this width the button is against the right margin and a panel anchored to
     its left edge runs off the screen. */
  .footer-prefs .picker-menu { left: auto; right: -18px; }
}

/* The bar that offers the other language. Bottom left, small, and it slides
   in after the page has drawn rather than pushing the hero down: the layout a
   visitor sees first is the one Shiho designed, not one rearranged by a
   notice. It appears at most once per visitor. */
.lang-offer {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100vw - 40px);
  padding: 14px 16px 14px 20px;
  background: #fff;
  border: 1px solid var(--line-dark, #ddd);
  box-shadow: 0 6px 28px rgba(0, 0, 0, .09);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}

.lang-offer.open { opacity: 1; transform: none; }

.lang-offer p { margin: 0; font-size: 12.5px; color: var(--ink); }

.lang-offer-go {
  flex: none;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  color: var(--ink);
}

.lang-offer-go[lang="ja"], .lang-offer[lang="ja"] .lang-offer-go { letter-spacing: .06em; }

.lang-offer-close {
  flex: none;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  padding: 0 2px;
}

.lang-offer-close:hover { color: var(--ink); }

@media (max-width: 560px) {
  .lang-offer {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    gap: 12px;
    padding: 12px 12px 12px 16px;
  }
  .lang-offer p { font-size: 12px; }
}


/* Shiho's phone/computer switch. Styled as a sibling of EDIT so the header
   still reads as one row of small capitals rather than gaining a control. */
.view-toggle {
  background: none;
  border: 0;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}

.view-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* While the phone layout is showing, this button is the way back out, so it
   reads as active rather than as one more thing to try. */
body.ed-preview-mobile .view-toggle { color: var(--ink); border-color: var(--ink); }

body.editing [contenteditable="true"] {
  outline: 1px dashed rgba(28, 28, 28, .4);
  outline-offset: 3px;
  cursor: text;
}

body.editing [contenteditable="true"]:hover,
body.editing [contenteditable="true"]:focus {
  outline: 1px solid var(--ink);
  background: rgba(255, 243, 176, .28);
}

/* A canvas block is ONE thing, not two.
   The editable text inside it drew its own dashed box, so every block Shiho
   added appeared as a box inside a box -- and the two behaved differently:
   dragging the outer moved both, deleting the inner left the outer behind,
   deleting the outer took both. There is no reason for her to see the inner
   one at all, so only the block is outlined. The text still tints while she
   is actually typing in it, which is the only cue that has to be there. */
body.editing .ed-cblock [contenteditable="true"],
body.editing .ed-extra [contenteditable="true"],
body.editing .ed-cblock [contenteditable="true"]:hover,
body.editing .ed-extra [contenteditable="true"]:hover {
  outline: none;
  background: none;
}
body.editing .ed-cblock [contenteditable="true"]:focus,
body.editing .ed-extra [contenteditable="true"]:focus {
  outline: none;
  background: rgba(255, 243, 176, .28);
}

body.editing img,
body.editing video { cursor: pointer; }

body.editing img:hover,
body.editing video:hover { opacity: .75; box-shadow: 0 0 0 2px var(--ink); }

body.editing { padding-bottom: 66px; }

.edit-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.edit-toolbar .hint { opacity: .7; }

.edit-toolbar button {
  background: none;
  border: 1px solid #8a8a8a;
  color: #fff;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 18px;
}

.edit-toolbar button:hover { background: #fff; color: var(--ink); border-color: #fff; }

.edit-toast {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 20px;
  font-size: 12.5px;
  max-width: min(560px, 92vw);
  text-align: center;
}

/* selection box + resize handles */

.edit-select {
  position: absolute;
  z-index: 190;
  border: 1px solid var(--ink);
  pointer-events: none;
  display: none;
}

.edit-select .h {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1px solid var(--ink);
  pointer-events: auto;
}

.edit-select .h.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.edit-select .h.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.edit-select .h.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.edit-select .h.se { right: -6px; bottom: -6px; cursor: nwse-resize; }

.edit-select .dim {
  position: absolute;
  bottom: -26px;
  left: 0;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 8px;
  white-space: nowrap;
}

/* right-click menu */

.edit-menu {
  position: fixed;
  z-index: 210;
  display: none;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 6px 0;
}

.edit-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.edit-menu button:hover { background: var(--bg-soft); }

/* PC / mobile preview toggle */

.device-toggle {
  display: flex;
  border: 1px solid #8a8a8a;
}

.device-toggle button {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.device-toggle button + button { border-left: 1px solid #8a8a8a; }

.device-toggle button.active { background: #fff; color: var(--ink); }

.edit-toolbar .grid-toggle { display: inline-flex; align-items: center; gap: 7px; }

.edit-toolbar .grid-toggle svg { stroke: currentColor; }

.edit-toolbar .grid-toggle.active { background: #fff; color: var(--ink); border-color: #fff; }

.device-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 195;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(15, 15, 15, .62);
  padding-bottom: 90px;
}

.preview-phone {
  width: 375px;
  max-width: 92vw;
  height: min(760px, calc(100vh - 190px));
  background: #fff;
  border: 11px solid #111;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.preview-phone iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.preview-caption {
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
}

/* grid editor: pan-hand cursor + move feedback */

body.editing [data-eid] { cursor: grab; }
body.editing [data-eid]:focus { cursor: text; }
body.editing img,
body.editing video { cursor: grab; }

body.grid-dragging,
body.grid-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

.grid-moving { outline: 1px solid var(--ink); outline-offset: 2px; box-shadow: 0 10px 34px rgba(0, 0, 0, .2); }

.grid-active { outline: 1px dashed rgba(28, 28, 28, .28); outline-offset: -1px; }

/* full-page grid overlay (24 columns), shown while editing on desktop */

.sm-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  display: none;
}

.sm-grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(28, 28, 28, .14) 0 1px, transparent 1px calc(100% / 24)),
    repeating-linear-gradient(to bottom, rgba(28, 28, 28, .06) 0 1px, transparent 1px var(--sm-row, 53px));
}

.sm-grid-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(40, 40, 40, .11);
  border-right: 1px solid rgba(40, 40, 40, .11);
}

@media (min-width: 861px) {
  body.grid-guides .sm-grid-overlay { display: block; }
}

/* ---------- responsive ---------- */

/* Image above, words below — Shiho's rule, applied to every width narrower
   than a laptop rather than only to phones. Between 861px and 1024px (tablets,
   large phones, a half-width browser window) these sections stayed side by
   side and squeezed the text into a column so narrow that words broke
   mid-syllable, which is the "half image half text" she kept reporting and
   could not fix by dragging. */
@container (max-width: 1024px) {
  .feature, .feature.reverse, .designer, .about-intro { grid-template-columns: 1fr; }
  .feature-media, .designer-media, .about-intro-media { order: -1; }
  .feature.reverse .feature-text { order: 0; }
  .feature-text, .designer-text { padding: 64px 8%; }
  .designer-text p, .feature-text p { max-width: none; }
  .about-intro-text { justify-self: stretch; max-width: none; padding: 64px 8%; }
}

@media (max-width: 960px) {
  /* the footer sits outside main, so it keeps measuring the window */
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .footer-col { padding: 0 26px; }
  .footer-col:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* These four are page content and must measure main, or the phone/computer
   switch shows something no phone renders. Missed in the first pass because
   this block was skipped wholesale for containing footer rules, and the check
   that should have caught it only compared the home page. Shiho found it in
   ten minutes: the product page split half and half, and the About page had a
   gap where the form-study grid had not stacked. */
@container (max-width: 960px) {
  .form-study { grid-template-columns: 1fr; column-gap: 0; row-gap: 34px; }
  /* Stacked, so the row and column each item was pinned to on a computer have
     to be released or they all pile into the same cell. */
  .fs-heading, .fs-grid, .fs-text { grid-column: auto; grid-row: auto; }
  /* Images first, words below: Shiho's phone rule overrides the older request
     (A2) that put the heading before the grid. The grid is the image here. */
  .fs-grid { order: -1; margin-top: 0; }
  .fs-text { order: 1; }

  /* The row gap is the only space under the heading here. Its own 34px bottom
     margin is what separates it from the paragraphs on a computer, where the
     rows are not gapped at all; stacked, the two landed on top of each other
     and left 68px of nothing under ABOUT FORM STUDY. */
  .fs-heading { order: 0; margin-bottom: 0; }
  .product-top { grid-template-columns: 1fr; }
  .faq-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-header { grid-template-columns: auto 1fr auto; padding: 16px 16px; gap: 10px; }
  .logo { font-size: 15px; letter-spacing: .2em; text-indent: .2em; justify-self: center; }
  .header-icons { gap: 13px; }
  .edit-toggle, .view-toggle { font-size: 9px; letter-spacing: .12em; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 15px 34px; border-bottom: 1px solid #f0eeeb; }
  /* G2: uniform separators; mark the active page with a short underline under the text only */
  .main-nav a.active {
    border-bottom-color: #f0eeeb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}

/* From here down the phone rules measure main, so the editor's MOBILE preview
   gets them too. The header and nav above stay on the window: they sit outside
   main and the editor draws its own chrome over them anyway. */
@container (max-width: 860px) {
  /* No phone override for the hero. It used to be forced to 58vh here, which
     cropped the photo on phones exactly the way the desktop rule did. Shiho
     chose no cropping anywhere, so the hero keeps its own shape on phones too
     and is correspondingly shorter. */
  .feature, .feature.reverse, .designer, .about-intro, .contact-top { grid-template-columns: 1fr; }

  /* Shiho's rule for phones: the image always comes first and the words come
     below it, in every image-and-text section, whatever the desktop layout
     says. She was recreating this by hand with drag offsets (704px of them on
     the About page) and it collapsed every time anything changed. Explicit
     order rules on the media make it impossible to get wrong. */
  .feature-media, .designer-media, .about-intro-media { order: -1; }
  .feature.reverse .feature-text { order: 0; padding: 60px 34px; }
  .feature-text, .designer-text { padding: 60px 34px; }
  .about-intro-text { padding: 44px 30px 40px; justify-self: stretch; max-width: none; }
  .about-intro-text h1 { margin-bottom: 24px; }
  .contact-form-wrap { padding: 50px 34px; }
  /* Contact policies and FAQ ran edge to edge, and some rows pushed past the
     screen. Everything on this page now sits inside the same side margin the
     rest of the site uses, and nothing is allowed to be wider than it. */
  .wrap.policies { padding-left: 24px; padding-right: 24px; }
  .policy .acc-head { font-size: 16px; letter-spacing: .16em; padding-right: 26px; }
  .policy p, .policy .acc-body { max-width: 100%; }
  .faq-row { padding: 14px 0; }
  .faq-row dt, .faq-row dd { min-width: 0; overflow-wrap: anywhere; }
  .product-top { padding: 20px 24px 60px; }
  .form-study { padding: 55px 34px 40px; }        /* A3: less space before the banner */
  .about-banner { min-height: 260px; padding: 60px 20px; }
  .about-banner::before, .about-banner::after { width: 26%; }
  .about-banner-inner h2 { font-size: 26px; }
  .page-banner h1 { font-size: 32px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid var(--line); }
  .pillar:first-child { border-top: 0; }
  .notice-grid { grid-template-columns: 1fr 1fr; }
  .signin-box { border: 0; padding: 40px 24px 90px; }
  .wrap { padding: 0 24px; }
  /* The Subscribe button sat tight under the email underline looking like it
     had fallen off the row. It now stacks with real space and matches the
     input's width so the pair reads as one control. */
  .newsletter-inline { flex-direction: column; align-items: center; gap: 26px; }
  .newsletter-inline input { width: min(320px, 82vw); text-align: center; }
  .newsletter-inline button { margin-left: 0; min-width: min(320px, 82vw); }
  /* keep wide tracked headings from overflowing the viewport */
  .designer-text h2 { font-size: 19px; letter-spacing: .1em; }   /* H1: 2 rows, not 4 */
  .about-intro-text h1 { font-size: 26px; letter-spacing: .14em; }

  /* The two Japanese About headings stay on one line, on any phone.
     「SHIHO MORIYAについて」 and 「FORM STUDYについて」 do not break anywhere a
     reader would choose, so a wrap leaves a stray fragment on a second line.
     FORM STUDYについて needed 329px and had 252 to 322 on every phone narrower
     than an iPhone Pro Max, so it wrapped on almost all of them.

     The size follows the width of the column instead of being fixed, which is
     what makes it fit at 320px as well as at 430px. Shiho's own size is the
     ceiling: it is published as --ed-size beside the font-size she set, so
     picking a size in the editor still decides how large this is on a roomy
     screen, and only a narrow one takes it below that.

     Deliberately no white-space: nowrap. If she ever types a much longer
     heading, wrapping is an ugly result and running off the side of the phone
     is a broken one.

     English is untouched: those headings are two lines because she wrote a line
     break into them, not because they ran out of room. */
  html[lang="ja"] [data-editor-page] .about-intro-text h1,
  html[lang="ja"] [data-editor-page] .fs-heading {
    font-size: min(var(--ed-size, 26px), 5.7cqi);
  }

  /* English gets the same treatment with more room, because its lines are one
     or two words rather than a whole phrase. It only bites below 289px: on a
     folded Galaxy the second line of ABOUT / SHIHO MORIYA missed fitting by a
     single pixel and fell to a third line. Every phone from 300px up is
     untouched, at exactly the size it was. */
  html[lang="en"] [data-editor-page] .about-intro-text h1,
  html[lang="en"] [data-editor-page] .fs-heading {
    font-size: min(var(--ed-size, 26px), 8.6cqi);
  }
  .product-info h1 { font-size: 30px; letter-spacing: .22em; }
  .contact-form-wrap h1 { font-size: 32px; }
  .coming-next h2 { font-size: 23px; letter-spacing: .22em; }
  .fs-heading { font-size: 26px; }
}

@media (max-width: 560px) {
  /* the footer is outside main, so it keeps measuring the window */
  .footer-grid { grid-template-columns: 1fr; row-gap: 38px; padding: 44px 24px 36px; }
  .footer-col, .footer-col:nth-child(odd) { border-left: 0; padding: 0; }
}

@container (max-width: 560px) {
  .newsletter-band form { width: 100%; }
  .newsletter-band input { flex: 1; min-width: 0; width: auto; }
  .notice-grid { grid-template-columns: 1fr; }
  .gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .page-banner h1 { font-size: 26px; }
  .feature-text h2 { font-size: 26px; }
  .about-banner::before, .about-banner::after { width: 20%; }
  .about-banner-inner h2 { font-size: 23px; }
}

/* ============================================================
   Visual-editor layout presets (rendered on the public site
   from the `layout` frontmatter — desktop only; mobile stacks)
   ============================================================ */
/* Container, not media. These come after the phone block, so on a window that
   is wide while main is narrow (exactly the editor's mobile preview) they
   would win and put the rows back into two columns while the phone rules
   above were trying to stack them. */
@container (min-width: 861px) {
  .feature.w-full { grid-template-columns: 1fr; }
  .feature.w-two-thirds { grid-template-columns: 66% 34%; }
  .feature.w-half { grid-template-columns: 50% 50%; }
  .feature.w-one-third { grid-template-columns: 34% 66%; }
  .feature.reverse.w-two-thirds { grid-template-columns: 34% 66%; }
  .feature.reverse.w-one-third { grid-template-columns: 66% 34%; }
}
.feature.w-full .feature-media { max-height: 62vh; }
.feature-text.ta-left { text-align: left; }
.feature-text.ta-center { text-align: center; }
.feature-text.ta-right { text-align: right; }
.feature-text.ta-center p,
.feature-text.ta-center .rule { margin-left: auto; margin-right: auto; }
.feature-text.ta-right p,
.feature-text.ta-right .rule { margin-left: auto; }

/* ============================================================
   Private visual-editor UI (.ed-*). Namespaced so it never
   affects the public site; only appears for a signed-in admin.
   ============================================================ */
.editor-logout {
  background: none;
  border: 0;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.editor-logout:hover { color: var(--ink); border-color: var(--ink); }
.edit-toggle.has-draft::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #c98a1a;
  vertical-align: middle;
}

/* movable media shows a grab hand; body.ed-moving switches it to grabbing */
body.editing [data-ed-field].ed-media { cursor: grab; }
body.editing [data-ed-field].ed-media:hover { box-shadow: 0 0 0 2px var(--ink); opacity: .82; }
body.editing [data-ed-block] { position: relative; }
body.editing [data-ed-block].ed-selected { outline: 2px solid var(--ink); outline-offset: 4px; }
body.editing [data-ed-block]:hover { outline: 1px dashed rgba(28,28,28,.35); outline-offset: 4px; }
body.editing [data-ed-block].ed-dragging { opacity: .45; }
.ed-block-handle {
  position: absolute; top: 8px; left: 8px; z-index: 20;
  background: var(--ink); color: #fff; border: 0;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; cursor: pointer; opacity: .85; border-radius: 2px;
}
.ed-block-handle:hover { opacity: 1; }

/* move grip: floating handle for dragging text boxes (images drag directly) */
.ed-grip {
  position: absolute; z-index: 310;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 0; border-radius: 3px;
  font-size: 13px; line-height: 1; cursor: grab; opacity: .9;
  touch-action: none;
}
.ed-grip:hover { opacity: 1; }
.ed-grip[hidden] { display: none; }
body.ed-moving, body.ed-moving * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
body.editing [data-ed-field].ed-media { touch-action: none; }

/* right-click menu on editable elements */
.ed-menu {
  position: fixed; z-index: 340;
  min-width: 190px;
  background: #fff; border: 1px solid var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 5px 0;
}
.ed-menu[hidden] { display: none; }
.ed-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 10px 16px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.ed-menu button:hover { background: var(--bg-soft); }
.ed-menu button[disabled] { opacity: .4; cursor: default; }

/* toolbar toggles (snap) */
.ed-btn.on { background: #fff; color: var(--ink); border-color: #fff; }

body.ed-preview-mobile main { max-width: 402px; margin: 0 auto; box-shadow: 0 0 0 1px var(--line); }
body.ed-preview-mobile .feature,
body.ed-preview-mobile .feature.reverse,
body.ed-preview-mobile .about-intro,
body.ed-preview-mobile .contact-top,
body.ed-preview-mobile .form-study { grid-template-columns: 1fr; }

.ed-toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: var(--ink); color: #fff;
  padding: 10px 18px;
}
.ed-toolbar[hidden] { display: none; }
.ed-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-status { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; min-width: 120px; }
.ed-status-ok { color: #8ee6a8; opacity: 1; }
.ed-status-warn { color: #f4c76b; opacity: 1; }
.ed-sep { width: 1px; height: 20px; background: #555; }
.ed-btn {
  background: none; border: 1px solid #7d7d7d; color: #fff;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 15px; cursor: pointer; border-radius: 2px;
}
.ed-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.ed-btn-primary { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
.ed-btn-primary:hover { background: #e9d9a8; border-color: #e9d9a8; }
.ed-btn-ghost { border-color: transparent; opacity: .7; }

.ed-panel {
  position: fixed; right: 18px; bottom: 70px; z-index: 300;
  width: 250px; background: #fff; color: var(--ink);
  border: 1px solid var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,.22);
  padding: 14px 16px;
}
.ed-panel[hidden] { display: none; }
.ed-panel-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ed-panel-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ed-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* toolbar: which layout you are editing */
.ed-scope-label {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  align-self: center;
  margin-right: 2px;
}
.ed-chip {
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 11px; padding: 6px 10px; cursor: pointer; border-radius: 2px;
}
.ed-chip:hover { border-color: var(--ink); }
.ed-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ed-focal { display: grid; grid-template-columns: repeat(3, 22px); gap: 5px; }
.ed-focal-dot { width: 22px; height: 22px; border: 1px solid var(--line); background: #fafafa; cursor: pointer; border-radius: 2px; }
.ed-focal-dot:hover { border-color: var(--ink); }
.ed-focal-dot.on { background: var(--ink); border-color: var(--ink); }

.ed-modal {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,15,15,.55); padding: 20px;
}
.ed-modal-body {
  background: #fff; color: var(--ink); max-width: 460px; width: 100%;
  border: 1px solid var(--ink); padding: 30px 32px;
  max-height: 88vh; overflow: auto;
}
.ed-modal-body h2 { font-size: 20px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.ed-modal-body p { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.ed-modal-body code { background: var(--bg-soft); padding: 2px 6px; font-size: 12.5px; }
.ed-filelist { margin: 4px 0 16px 18px; font-size: 13px; line-height: 1.7; }

/* blocks Shiho adds herself: they land at the end of the page, then she drags
   them wherever she wants */
.ed-extras { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.ed-extra { margin: 26px 0; }
.ed-extra img { max-width: 100%; height: auto; display: block; }
.ed-extra-text { font-size: 15px; line-height: 1.7; max-width: 640px; }
body.editing .ed-fresh { outline: 2px solid #0f6e3f; outline-offset: 4px; }

/* removed elements: invisible to visitors (base.njk), a ghost while editing so
   nothing ever disappears on Shiho without a way back */
/* Removed means removed. It used to stay on screen as a faded ghost with a
   REMOVED tag so nothing could be deleted by accident, but the effect was that
   things Shiho deleted weeks ago were still sitting on the page every time she
   opened the editor, which read as the deletion not having worked. It now goes
   away immediately; "Removed (n)" in the toolbar lists everything taken off
   and puts any of it back, so nothing is actually lost. */
body.editing .ed-ghost { display: none !important; }

/* ---------- canvas editing ---------- */

body.editing .ed-canvas { outline: 1px dashed rgba(28,28,28,.16); outline-offset: -1px; }
body.editing .ed-cblock { position: relative; }
body.editing .ed-cblock:hover { outline: 1px dashed rgba(28,28,28,.4); outline-offset: 2px; }

/* The grid only appears while she is actually dragging, so the page stays
   clean to look at and the cells are there exactly when they are useful. */
.ed-canvas-grid.ed-grid-on {
  background-image:
    repeating-linear-gradient(to right, rgba(28,28,28,.16) 0 1px, transparent 1px calc(100% / 24)),
    repeating-linear-gradient(to bottom, rgba(28,28,28,.10) 0 1px, transparent 1px 32px);
  background-position: 40px 0;
  background-size: calc(100% - 80px) 100%;
  background-repeat: no-repeat;
}
@media (max-width: 860px) {
  .ed-canvas-grid.ed-grid-on {
    background-image:
      repeating-linear-gradient(to right, rgba(28,28,28,.16) 0 1px, transparent 1px calc(100% / 8)),
      repeating-linear-gradient(to bottom, rgba(28,28,28,.10) 0 1px, transparent 1px 30px);
    background-position: 24px 0;
    background-size: calc(100% - 48px) 100%;
  }
}

.ed-cgrip {
  position: absolute;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 5;
}
body.editing .ed-cblock:hover .ed-cgrip,
body.editing .ed-cblock:focus-within .ed-cgrip { opacity: 1; }
.ed-cgrip-move {
  top: -11px; left: -11px; width: 22px; height: 22px;
  font-size: 12px; cursor: grab;
}
.ed-cgrip-se {
  right: -7px; bottom: -7px; width: 14px; height: 14px;
  cursor: nwse-resize;
}
body.ed-moving .ed-cgrip-move { cursor: grabbing; }

/* "Add section" strips, between every section while editing */
.ed-addsec {
  position: relative;
  height: 0;
  display: flex;
  justify-content: center;
  z-index: 30;
}
.ed-addsec-btn {
  position: relative;
  top: -13px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 16px;
  opacity: 0;
  transition: opacity .16s ease;
}
.ed-addsec:hover .ed-addsec-btn,
.ed-addsec-btn:focus-visible { opacity: 1; }
/* a faint line so the insertion point is findable before hovering */
.ed-addsec::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  border-top: 1px dashed rgba(28,28,28,.22);
  opacity: 0;
  transition: opacity .16s ease;
}
.ed-addsec:hover::before { opacity: 1; }

.ed-canvas-tools {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 10px;
}
/* .ed-btn is white-on-dark for the toolbar. On the canvas's own white ground
   that made this control invisible until it was hovered, which is no use for
   a button whose job is to be found. It gets its own colours. */
.ed-canvas-tool {
  font-size: 10px; padding: 8px 16px;
  color: var(--ink); background: #fff; border: 1px solid var(--ink);
  opacity: 1;
}
.ed-canvas-tool:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
body:not(.editing) .ed-canvas-tools { display: none; }

/* A selected thing has to look selected, or Delete is a guess. */
body.editing .ed-cblock.ed-selected,
body.editing [data-ed-block].ed-selected { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the block picker */
.ed-picks { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-pick-btn {
  width: 100%; text-align: left; padding: 12px 14px; line-height: 1.4;
  display: flex; flex-direction: column; gap: 3px;
}
.ed-pick-btn strong { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ed-pick-btn span { font-size: 11.5px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.ed-pick-btn:hover span { color: inherit; }

/* shift+click multi-select */
.ed-multisel { outline: 2px solid #2f6fed !important; outline-offset: 2px; }

/* movable non-field elements show the same affordance as text on hover */
body.editing .ed-movable:hover { outline: 1px dashed #b9b3aa; outline-offset: 2px; }

/* image corner resize handle */
.ed-resize {
  position: absolute; z-index: 305; width: 16px; height: 16px;
  border: 2px solid #fff; background: var(--ink); border-radius: 3px;
  cursor: nwse-resize; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* size & crop panel reuses .ed-panel styling */
.ed-imgpanel { z-index: 315; }
.ed-imgpanel .ed-imgwidth { width: 170px; }

/* export dialog: page checkboxes */
.ed-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.ed-check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.ed-check input { width: 14px; height: 14px; accent-color: var(--ink); }
.ed-modal .ed-panel-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }

/* text & button style panel */
.ed-txtpanel { z-index: 315; width: 270px; max-height: 76vh; overflow: auto; }
.ed-txtpanel .ed-txtrange { width: 100%; }
.ed-txtpanel .ed-color { width: 46px; height: 26px; padding: 0; border: 1px solid var(--line-dark); background: none; cursor: pointer; }

/* edit mode: every accordion and collapsible section is held open so all of
   their text is visible and editable; the +/- toggles are disabled in main.js */
body.editing .acc-body { display: block; }
body.editing .acc .acc-head::after,
body.editing .policy .acc-head::after { content: "\2212"; }
body.editing .collapsible .collapse-body { display: block; }
body.editing .collapsible .section-head { margin-bottom: 26px; }

/* publish summary: what changes, grouped by the file it lands in */
.ed-changelist { list-style: none; margin: 6px 0 16px; padding: 0; }
.ed-change-file + .ed-change-file { margin-top: 12px; }
.ed-change-file > strong { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ed-change-items { margin: 5px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.65; }
.ed-change-items li { margin: 0; }
.ed-change-items li::marker { color: var(--ink-soft, #999); }
.ed-warn { color: #9a5a10; background: #fdf5e4; border: 1px solid #e7cf9a; padding: 10px 12px; font-size: 12.5px; }
.ed-modal-hint { color: var(--ink-soft, #666); font-size: 13px; }

/* version history list */
.ed-versions { list-style: none; margin: 14px 0 0; padding: 0; }
.ed-version {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--line);
}
.ed-version:last-child { border-bottom: 1px solid var(--line); }
.ed-version-when { font-size: 13.5px; letter-spacing: .02em; }
.ed-version-meta {
  grid-column: 1; font-size: 12px; color: var(--ink-soft, #777);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ed-version .ed-btn { grid-column: 2; grid-row: 1 / span 2; }

/* History now spans every page, so each row says which pages it changed and
   offers a Restore per page. One commit can touch several. */
.ed-version-pages { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 1px; }
.ed-version-page {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line-dark); color: var(--muted);
}
.ed-version-page.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ed-version-actions {
  grid-column: 2; grid-row: 1 / span 3;
  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.ed-version-actions .ed-btn { grid-column: auto; grid-row: auto; white-space: nowrap; }

@media (max-width: 600px) {
  .ed-version { grid-template-columns: 1fr; }
  .ed-version-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
}
.ed-version-now {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  background: var(--ink); color: #fff; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px;
}
.ed-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* .ed-btn is white-on-dark for the toolbar; on a white card (modal or panel)
   it needs inverting, or secondary buttons read as empty boxes. */
.ed-modal .ed-btn, .ed-panel .ed-btn { color: var(--ink); border-color: #b3b3b3; }
.ed-modal .ed-btn:hover, .ed-panel .ed-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ed-modal .ed-btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.ed-modal .ed-btn-primary:hover { background: #3a3a3a; border-color: #3a3a3a; }
.ed-modal .ed-btn[disabled] { opacity: .4; cursor: default; }
.ed-modal .ed-btn.on,
.ed-panel .ed-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ed-spinner {
  width: 26px; height: 26px; margin: 20px auto 0;
  border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%;
  animation: ed-spin .8s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }

.ed-toast {
  position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 330; background: var(--ink); color: #fff;
  padding: 11px 20px; font-size: 13px; max-width: min(560px, 92vw); text-align: center;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.ed-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dedicated admin login page (/admin-login), separate from customer /login */
.admin-login-wrap {
  min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px;
}
.admin-login-card { width: 100%; max-width: 380px; }
.admin-login-card h1 { font-size: 22px; letter-spacing: .2em; text-transform: uppercase; text-align: center; margin-bottom: 8px; }
.admin-login-card .sub { text-align: center; color: var(--muted); font-size: 12.5px; letter-spacing: .06em; margin-bottom: 28px; }
.admin-login-card label { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.admin-login-card .field { margin-bottom: 18px; }
.admin-login-card input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  font-size: 14px; background: #fff; color: var(--ink);
}
.admin-login-card input:focus { outline: none; border-color: var(--ink); }
.admin-login-card button[type="submit"] {
  width: 100%; padding: 14px; background: var(--ink); color: #fff;
  border: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.admin-login-card button[type="submit"]:hover { background: #000; }
.admin-login-card button[disabled] { opacity: .6; cursor: default; }
.admin-login-error {
  background: #fdf5e4; border: 1px solid #e7cf9a; color: #9a5a10;
  padding: 11px 14px; font-size: 13px; margin-bottom: 18px; display: none;
}
.admin-login-error.show { display: block; }