:root { --ink:#111110; --paper:#F0EDE6; --white:#FAF9F6; --green:#2D6A4F; --mark:#2D6A4F; --mark-d:#52B788; --stone:#6F6E68; --line:#11111022; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  img { display:block; width:100%; height:100%; object-fit:cover; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

  /* wordmark: letters with the two green long marks */
  .wm { display:inline-flex; font-weight:500; letter-spacing:.16em; margin-right:-.16em; line-height:1.25; }
  .wm span { position:relative; display:inline-block; }
  .wm .m:before { content:""; position:absolute; left:6%; right:calc(6% + .16em); top:-.1em; height:.11em; background:var(--mark); transition:background .25s; }
  .on-dark .wm .m:before { background:var(--mark-d); }
  .bars { display:inline-flex; flex-direction:column; gap:5px; }
  .bars i { display:block; width:26px; height:4px; background:var(--green); }

  .eyebrow { font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--green); font-weight:500; }
  .small { font-size:12px; letter-spacing:.3em; text-transform:uppercase; }

  header { position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); }
  header .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
  header .wm { font-size:24px; }
  nav { display:flex; gap:28px; }
  nav a { font-size:12px; letter-spacing:.26em; text-transform:uppercase; }
  nav a:hover { color:var(--green); }

  .hero { display:grid; grid-template-columns:1fr 1fr; height:min(calc(100vh - 68px), 860px); min-height:560px; }
  .hero .photo img { object-position:50% 18%; }
  .hero .copy { display:flex; flex-direction:column; justify-content:center; padding:64px 56px 64px max(24px, calc((100vw - 1180px)/2 + 24px)); }
  .hero .wm { font-size:clamp(54px, 8vw, 112px); margin:22px 0 8px; }
  .hero .tag { font-size:13px; letter-spacing:.5em; text-transform:uppercase; }
  .hero p { max-width:30em; margin:34px 0 36px; color:#2b2b29; }
  .hero .photo { background:#dcd9d1; min-height:520px; }
  .btn { display:inline-block; align-self:flex-start; border:1px solid var(--ink); padding:15px 26px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; transition:.2s; }
  .btn:hover { background:var(--ink); color:var(--paper); }
  .btn.solid { background:var(--green); border-color:var(--green); color:#fff; }
  .btn.solid:hover { background:var(--ink); border-color:var(--ink); }

  section { padding:104px 0; }
  h2 { font-size:clamp(30px, 4vw, 46px); line-height:1.15; font-weight:500; letter-spacing:-.01em; margin:14px 0 18px; }
  .lead { max-width:36em; color:#2b2b29; }

  .products { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:52px; }
  .card .ph { aspect-ratio:4/5; background:#dcd9d1; overflow:hidden; }
  .card .ph img { transition:transform .6s; }
  .card:hover .ph img { transform:scale(1.03); }
  .card .meta { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px 2px 0; }
  .card h3 { font-size:19px; font-weight:500; margin:0 0 4px; }
  .card .sub { color:var(--stone); font-size:14px; }
  .pill { white-space:nowrap; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--green); border:1px solid var(--green); padding:7px 12px; }

  .marks { margin-top:44px; display:grid; grid-template-columns:auto 1fr; gap:28px 48px; align-items:center; }
  .marks .lab { font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin-bottom:14px; }
  .swatches { display:flex; gap:10px; flex-wrap:wrap; }
  .sw { display:flex; align-items:center; gap:10px; background:none; border:1px solid var(--line); padding:10px 16px 10px 12px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
  .sw i { width:22px; height:6px; background:var(--c); display:block; }
  .sw[aria-pressed="true"] { border-color:var(--ink); }
  .sw:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
  .tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px 12px 26px; background:#FAF9F6; border:1px solid var(--line); }
  .tile.on-dark { background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .tile .wm { font-size:30px; }
  .tile .t { font-size:8px; letter-spacing:.5em; margin-right:-.5em; }
  .note { grid-column:1 / -1; font-size:13px; color:var(--stone); margin:0; }
  .kids { background:var(--white); border-top:1px solid var(--line); }
  .kids .wrap { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .kids .pics { display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:end; }
  .kids .pics .a { aspect-ratio:4/5; background:#dcd9d1; overflow:hidden; }
  .kids .pics .b { aspect-ratio:1/1; background:#dcd9d1; overflow:hidden; }
  .kids .eyebrow { color:#B3261E; }
  .kids .row { display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap; }
  .kids .pill { color:#B3261E; border-color:#B3261E; }
  .band { background:var(--ink); color:var(--paper); }
  .band .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
  .band h2 { margin-top:18px; }
  .band p { color:#cfccc4; max-width:32em; }
  .band .rule { width:64px; height:6px; background:var(--green); }
  .steps { border-top:1px solid #ffffff22; }
  .steps div { display:flex; gap:22px; padding:22px 0; border-bottom:1px solid #ffffff22; }
  .steps b { font-weight:500; font-size:12px; letter-spacing:.28em; color:#8f8d86; padding-top:4px; }

  .details { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:52px; }
  .details figure { margin:0; }
  .details .ph { aspect-ratio:1/1; background:#dcd9d1; overflow:hidden; }
  .details figcaption { padding-top:14px; font-size:14px; }
  .details figcaption b { display:block; font-weight:500; font-size:15px; }
  .details figcaption span { color:var(--stone); }

  .name { background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .name .wrap { display:grid; grid-template-columns:auto 1fr; gap:72px; align-items:center; }
  .kanji { font-family:"Hiragino Mincho ProN","Yu Mincho","Songti SC",serif; font-weight:600; font-size:clamp(96px, 13vw, 168px); line-height:1.05; writing-mode:vertical-rl; }
  .gloss { display:grid; grid-template-columns:auto 1fr; gap:10px 24px; margin-top:26px; max-width:30em; }
  .gloss dt { font-weight:500; }
  .gloss dd { margin:0; color:#2b2b29; }

  .close { text-align:center; }
  .close .wm { font-size:clamp(40px, 6vw, 72px); margin:10px 0 6px; }
  .close p { margin:26px auto 32px; max-width:28em; color:#2b2b29; }
  .close .btn { align-self:auto; }

  footer { border-top:1px solid var(--line); padding:34px 0 46px; font-size:13px; color:var(--stone); }
  footer .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }

  @media (max-width: 860px) {
    nav { display:none; }
    .hero { grid-template-columns:1fr; height:auto; min-height:0; }
    .hero .copy { padding:56px 24px 48px; order:2; }
    .hero .photo { order:1; min-height:0; aspect-ratio:4/5; }
    section { padding:72px 0; }
    .products { grid-template-columns:1fr; gap:44px; }
    .marks { grid-template-columns:1fr; }
    .band .wrap, .name .wrap, .kids .wrap { grid-template-columns:1fr; gap:40px; }
    .details { grid-template-columns:1fr 1fr; }
    .kanji { writing-mode:horizontal-tb; }
  }

  /* multi-page additions */
  nav a[aria-current="page"] { color:var(--green); }
  .pagehead { padding:84px 0 0; }
  .pagehead + section { padding-top:44px; }
  .feature { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:72px; }
  .feature .ph { aspect-ratio:1/1; background:#dcd9d1; overflow:hidden; }
  .band .btn { border-color:var(--paper); color:var(--paper); margin-top:10px; }
  .band .btn:hover { background:var(--paper); color:var(--ink); }
  .kids { border-top:0; background:var(--paper); }
  @media (max-width: 860px) {
    header .wrap { height:auto; flex-direction:column; gap:12px; padding-top:16px; padding-bottom:14px; }
    nav { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
    nav a { font-size:11px; letter-spacing:.2em; }
    .feature { grid-template-columns:1fr; gap:32px; margin-top:48px; }
    .pagehead { padding-top:56px; }
  }

  /* guest edition 02: three test designs, two square pictures each */
  .products.three { grid-template-columns:repeat(3, 1fr); gap:22px; }
  .card .ph.sq { aspect-ratio:1/1; }
  .card .ph.sq + .ph.sq { margin-top:8px; }
  @media (max-width: 860px) { .products.three { grid-template-columns:1fr; gap:44px; } }

  /* women's page: 3D viewer */
  .vgrid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
  .vbox { position:relative; background:#E2DFD7; aspect-ratio:4/5; overflow:hidden; }
  #viewer { position:absolute; inset:0; cursor:grab; touch-action:pan-y; }
  #viewer.grab { cursor:grabbing; }
  #viewer img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; user-select:none; -webkit-user-drag:none; pointer-events:none; }
  #viewer img.on { opacity:1; }
  #viewer:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
  .vhint { position:absolute; left:50%; transform:translateX(-50%); bottom:14px; white-space:nowrap; padding:7px 14px; background:#F0EDE6e6; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#111110; pointer-events:none; z-index:2; }
  .vside .lab { font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin:0 0 14px; }
  .vside .vbs + .lab { margin-top:34px; }
  .vbs { display:flex; gap:10px; flex-wrap:wrap; }
  .vb { background:none; border:1px solid var(--line); padding:12px 18px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; }
  .vb[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
  .vb:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
  @media (max-width: 860px) { .vgrid { grid-template-columns:1fr; gap:32px; } }

  #viewer.busy { opacity:.55; }
  #viewer { transition:opacity .2s; }