/* Shinome Lab client hub. DS v3 paper, sales voice. Tokens come from tokens.css (vendored copy, never edited here).
   Same mast, paper, hairlines and buttons as courses.shinomelab.com so the hub and the shopping list read as one product. */
@font-face{font-family:Cormorant;font-weight:600;font-display:swap;src:url('/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:Satoshi;font-weight:400;font-display:swap;src:url('/fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:Satoshi;font-weight:700;font-display:swap;src:url('/fonts/satoshi-700.woff2') format('woff2')}
@font-face{font-family:'Noto Sans JP';font-weight:400;font-display:swap;src:url('/fonts/notosansjp-subset.woff2') format('woff2')}

*{box-sizing:border-box}
html{height:100%}
body{min-height:100%;margin:0;background:var(--bg);color:var(--ink);font:var(--text-lede)/1.5 var(--font-body-sales);-webkit-font-smoothing:antialiased}
/* The page's one effect: paper grain on the ground, under nothing that holds text. */
body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:var(--grain-paper);mix-blend-mode:multiply;z-index:5}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.small{font-size:var(--text-small)}

/* Shell and mast, identical to the courses module. Courses' mast holds a 44px country nav, which sets its height (54px);
   here the brand itself takes those 44px so the rule sits at the same y on both pages. */
.shell{max-width:1280px;min-height:100vh;min-height:100dvh;margin:auto;padding:var(--sp-4) var(--sp-6) var(--sp-6);display:flex;flex-direction:column}
.mast{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--sp-4);border-bottom:2px solid var(--ink);padding-bottom:var(--sp-1)}
.mast .brand{display:inline-flex;align-items:center;min-height:44px}
.brand{font-size:var(--text-small);font-weight:700;letter-spacing:.22em;margin:0}
/* Only the 400 file of the kanji face ships: a 700 here would be a browser-faked bold. */
.kanji{font-family:var(--font-kanji);font-weight:400;letter-spacing:0;margin-right:var(--sp-2)}

/* One column, one left edge (F4). Rules run the shell's width like the courses rows; the text stops at a reading measure. */
main{flex:1;padding-top:var(--sp-4)}
.greeting h1{font:600 var(--text-h1)/1.1 var(--font-display-sales);margin:0;text-wrap:balance}
.greeting p{margin:var(--sp-1) 0 0;max-width:66ch;color:var(--ink)}

/* The modules: an index on paper, not boxes. Entry titles are set like the courses product names (Satoshi 700 at the lede size),
   the page h1 keeps the display face alone. One hairline above each entry, the actions as the only tap targets. */
.modules{list-style:none;margin:var(--sp-5) 0 0;padding:0}
.module{border-top:1px solid var(--line);padding:var(--sp-4) 0 var(--sp-5)}
.module h2{font-size:var(--text-lede);line-height:1.35;font-weight:700;margin:0}
.module p{margin:var(--sp-1) 0 0;max-width:42ch;color:var(--ink);text-wrap:pretty}
.go{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
/* The courses button recipe: small text, regular weight, 1px muted hairline, 2px radius, 44px tall. */
.action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:120px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--muted);border-radius:var(--r-sm);font-size:var(--text-small);text-decoration:none;background:none;transition:background .15s ease-out}
.action:hover{background:var(--surface)}
.action:active{background:var(--bg-deep)}

footer{font-size:var(--text-small);color:var(--muted);border-top:1px solid var(--muted);padding-top:var(--sp-3);margin-top:var(--sp-4)}
footer p{margin:0 0 var(--sp-1)}
footer .brand{color:var(--ink);margin-bottom:var(--sp-2)}
footer a{display:inline-flex;align-items:center;min-height:44px}

@media(max-width:760px){
  .shell{padding:var(--sp-2) var(--sp-3) var(--sp-4)}
  main{padding-top:var(--sp-2)}
  .modules{margin-top:var(--sp-4)}
  .module{padding:var(--sp-3) 0 var(--sp-4)}
  /* Two countries side by side, each a full thumb-width target, like the Ma liste controls in courses. */
  .action{flex:1 1 0;min-width:0}
  footer{margin-top:var(--sp-4)}
}

@media(prefers-reduced-motion:reduce){.action{transition:none}}