/* Extracted verbatim from the sediment.html prototype.
   Every rule below is byte-for-byte what the prototype shipped. New rules
   for pages the prototype did not have live in gallery.css, so this file
   can always be diffed against the original. */

  :root{
    --ink:#101010;
    --paper:#EDEAE3;
    --rule:#101010;
    --dim:#6E6A62;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    line-height:1.45;
  }
  .wrap{max-width:900px;margin:0 auto;padding:36px 20px 90px;}

  header{border-bottom:2px solid var(--rule);padding-bottom:18px;margin-bottom:28px;}
  h1{
    font-size:clamp(34px,7vw,58px);
    margin:0 0 6px;
    letter-spacing:-2px;
    font-weight:600;
  }
  .sub{font-size:13px;color:var(--dim);max-width:56ch;}

  .input-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
  input[type=text]{
    flex:1;min-width:240px;
    font-family:inherit;font-size:13px;
    padding:12px 14px;
    border:2px solid var(--rule);
    background:#fff;color:var(--ink);
  }
  input:focus{outline:2px solid var(--ink);outline-offset:2px;}
  button{
    font-family:inherit;font-size:12px;font-weight:600;
    padding:12px 18px;
    border:2px solid var(--rule);
    background:var(--ink);color:var(--paper);
    cursor:pointer;letter-spacing:0.4px;
  }
  button.ghost{background:transparent;color:var(--ink);}
  button:hover{opacity:0.82;}
  button:active{transform:translateY(1px);}
  .hint{font-size:11px;color:var(--dim);margin-bottom:30px;}

  .piece{
    display:grid;
    grid-template-columns:1fr 230px;
    gap:26px;
    align-items:start;
  }
  @media(max-width:720px){ .piece{grid-template-columns:1fr;} }

  #art{
    width:100%;
    aspect-ratio:1/1;
    border:2px solid var(--rule);
    display:block;
    background:#fff;
  }

  .traits{border:2px solid var(--rule);background:#fff;}
  .traits h2{
    margin:0;font-size:11px;font-weight:600;letter-spacing:1px;
    padding:10px 14px;border-bottom:2px solid var(--rule);
  }
  .trait{
    display:flex;justify-content:space-between;gap:10px;
    padding:9px 14px;font-size:12px;
    border-bottom:1px solid #DCD8D0;
  }
  .trait:last-child{border-bottom:none;}
  .trait span:first-child{color:var(--dim);}
  .trait span:last-child{font-weight:600;font-variant-numeric:tabular-nums;}

  .hashline{
    margin-top:14px;font-size:10.5px;color:var(--dim);
    word-break:break-all;line-height:1.6;
  }
  .actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
  .actions button{font-size:11px;padding:9px 13px;}

  .note{
    margin-top:46px;padding-top:20px;border-top:2px solid var(--rule);
    font-size:12px;color:var(--dim);max-width:62ch;
  }
  .note b{color:var(--ink);font-weight:600;}